Question

js怎么让函数执行的过程中点击别的函数不执行

参考目标效果完成制作1）实现点击每个楼层的按钮，电梯移动到对应楼层的效果。2）每层的 y 坐标为（8 、 101 、 194 、 287 、 380）。3）电梯移动速度为 10 像素/帧。4）电梯移动过程中，点击楼层的按钮无效。图一为目标效果，点击哪个楼层的按钮就移动到哪，但是在移动的过程中，点击别的按钮不起作用。图二图三图四是我弄得，就是不会怎么让在移动的过程中点击别的楼层的按钮无效。





Answer 1

<style>
.lou {position:relative; width:530px; height:465px; background:url(楼房背景图片) no-repeat center / 100% 100%}
.ti {position:absolute; width:120px; height:89px; left:325px; background:url(电梯图片) no-repeat}
.an {position:absolute; width:23px; height:23px; left:480px; background:url(电梯图片) no-repeat}
</style>
<div class="lou">
   <div class="ti" style="top:194px"></div>
   <div class="an" style="top:38px"></div>
   <div class="an" style="top:131px"></div>
   <div class="an" style="top:224px"></div>
   <div class="an" style="top:317px"></div>
   <div class="an" style="top:410px"></div>
</div>
<script>
$(function(){
   var free=true;  //这个变量用于在电梯移动过程中使按钮失效
   $(".an").on("click",function(){
      if(free){   //变量free的值为true按钮才生效
         var that=this;
         var titop=parseInt($(".ti").css("top"));
         var loutop=($(this).index()-1)*93+8;
         if(titop!=loutop){
            free=false;   //移动过程中free为false所以此时再点击按钮无效
            $(".ti").animate({
               top:(Math.abs(titop-loutop)<10)?loutop+"px":(titop>loutop)?"-=10px":"+=10px"
            },100,function(){
               free=true;  //电梯移动到位后free为true所以按钮可点击
               $(that).trigger("click");
            });
         }
      }
   });
});
</script>

Answer 2

var app = new PIXI.Application(520,460);
document.body.appendChild(app.view);

var bg = new PIXI.Sprite.fromImage("res/lianxi/elevator/bg.png");
app.stage.addChild(bg);

var elevator = new PIXI.Sprite.fromImage("res/lianxi/elevator/dt.png");
elevator.y = 380;
elevator.x = 325;
app.stage.addChild(elevator);

var person = new PIXI.Sprite.fromImage("res/lianxi/elevator/p1.png");
person.y = 40;
person.x = 40;
elevator.addChild(person);

var btn1 = new PIXI.Sprite.fromImage("res/lianxi/elevator/anniu-shang-2_08.png");
btn1.x = 480;
btn1.y = 40;
app.stage.addChild(btn1);

var btn2 = new PIXI.Sprite.fromImage("res/lianxi/elevator/anniu-shang-2_08.png");
btn2.x = 480;
btn2.y = 130;
app.stage.addChild(btn2);

var btn3 = new PIXI.Sprite.fromImage("res/lianxi/elevator/anniu-shang-2_08.png");
btn3.x = 480;
btn3.y = 220;
app.stage.addChild(btn3);

var btn4 = new PIXI.Sprite.fromImage("res/lianxi/elevator/anniu-shang-2_08.png");
btn4.x = 480;
btn4.y = 310;
app.stage.addChild(btn4);

var btn5 = new PIXI.Sprite.fromImage("res/lianxi/elevator/anniu-shang-2_08.png");
btn5.x = 480;
btn5.y = 410;
app.stage.addChild(btn5);

btn1.interactive = true;
btn1.buttonMode = true;
btn2.interactive = true;
btn2.buttonMode = true;
btn3.interactive = true;
btn3.buttonMode = true;
btn4.interactive = true;
btn4.buttonMode = true;
btn5.interactive = true;
btn5.buttonMode = true;

var play = 0;
var num = 8;

btn1.on("click",change1);
function change1(){
    play = 1;
    num = 8;
}

btn2.on("click",change2);
function change2(){
    play = 2;
    num = 101;
}

btn3.on("click",change3);
function change3(){
    play = 3;
    num = 194;
}

btn4.on("click",change4);
function change4(){
    play = 4;
    num = 287;
}

btn5.on("click",change5);
function change5(){
    play = 5;
    num = 380;
}

app.ticker.add(animate);
function animate(){
    if(play == 5){
        if(elevator.y > num){
            elevator.y -= 10;
        }
        if(elevator.y < num){
            elevator.y += 10;
        }
    }
    if(play == 4){
        if(elevator.y > num){
            elevator.y -= 10;
        }
        if(elevator.y < num){
            elevator.y += 10;
        }
    }
    if(play == 3){
        if(elevator.y > num){
            elevator.y -= 10;
        }
        if(elevator.y < num){
            elevator.y += 10;
        }
    }
    if(play == 2){
        if(elevator.y > num){
            elevator.y -= 10;
        }
        if(elevator.y < num){
            elevator.y += 10;
        }
    }
    if(play == 1){
        if(elevator.y > num){
            elevator.y -= 10;
        }
        if(elevator.y < num){
            elevator.y += 10;
        }
    }
    
    if(elevator.y == num){
        play = 0;
    }
}

这个是我写的那个全的代码。。不知道怎么改。

Answer 3

定义一个全局开关toggle=true;
点击按钮时，判断开关是否可用
如果可用，if(toggle){//将开关定义为不可用toggle=false,这样其他按钮点击就无效了，然后执行所要执行动作，执行完毕将开关打开toggle=true}

追问

是这样吗？可是做出来之后是电梯到了那之后再点击其他按钮其他按钮也没有反应了。。

追答

<ul>
    <li>button1</li>
    <li>button2</li>
    <li>button3</li>
</ul>

<script src="js/jquery-1.9.1.min.js"></script>
<script>
    $(function () {
        var toggle=true;//开关
        $("li").click(function(){
            if(toggle){
                toggle=!toggle;//取反，就是取true的反为false；等于 toggle=false;
                var x=0;
                var $this=$(this);
                var timer=setInterval(function(){
                    x+=5;
                    if(x>=400){
                        clearInterval(timer);
                        toggle=!toggle;
                    }
                    $this.css("margin-left",x+"px");
                },20)
            }
        })
    })
</script>