jQuery按顺序显示/隐藏div而不重叠

Question

我试图使一组div在单击按钮后按时间顺序一个接一个地显示，同时用网络摄像头拍照并将其发送到服务器。 我已经做到了，但是当我双击鼠标时，该功能多次触发，导致div彼此重叠。

我正在使用jQuery在某些时候显示和隐藏适当的div，并且我尝试使用.one处理程序，但它似乎无法正常工作吗？ 我不确定我是在做错什么，还是有更好的方法可以做到？

谢谢！

var stages = [];
stages.push(document.getElementById('one'));
stages.push(document.getElementById('two'));
stages.push(document.getElementById('three'));
stages.push(document.getElementById('four'));

var currentStage = 0;

stages[currentStage].style.display = 'block';

function clickHandler() {
    setTimeout(showModal, 3000);
}


function showModal(){

     stages[currentStage].style.display = 'none';
         currentStage++;

         if (currentStage >= 3) currentStage = 0;

         stages[currentStage].style.display = 'block';

}

$("#analyse").one("click", function() {
     $("#one" ).fadeOut( "fast", function() {
           clickHandler();
           $( "#two" ).fadeIn( "slow", function() {

               setTimeout(function(){$("#three").fadeIn()},6000);
               setTimeout(function(){$("#three").fadeOut()}, 7000);
               setTimeout(function(){$("#four").fadeIn()}, 7000);

          });
     });
});

Answer 1

首次单击后，您需要锁定该单击以防止按钮垃圾邮件。 您可以使用一个标志来实现这一点，并在输入$("#analyse").one()后立即放置一个if (flag == true)并将标志立即变为false 。

一切完成后，似乎7秒钟后，将其更改为true 。

编辑

var canClick = true;

$("#analyse").one("click", function() {
    // Check if can start executing
    if (canClick) {
        // Stop next executions
        canClick = false;

        // After 8 seconds, allow executing again
        setTimeout(function () {
            canClick = true;
        }, 8000);

        $("#one" ).fadeOut( "fast", function() {
            clickHandler();
        $( "#two" ).fadeIn( "slow", function() {

            setTimeout(function(){$("#three").fadeIn()},6000);
            setTimeout(function(){$("#three").fadeOut()}, 7000);
            setTimeout(function(){$("#four").fadeIn()}, 7000);
         });
    });
});

Answer 2

除了标记，您还可以取消绑定：

$（ “＃分析”）解除绑定（ '点击'）;

但是通常即使双击也只能一次调用该函数。 因此，我建议尝试以下方法：

$("#analyse").unbind('click');
$("#analyse").one("click", function() {
     $("#one" ).fadeOut( "fast", function() {
           clickHandler();
           $( "#two" ).fadeIn( "slow", function() {

               setTimeout(function(){$("#three").fadeIn()},6000);
               setTimeout(function(){$("#three").fadeOut()}, 7000);
               setTimeout(function(){$("#four").fadeIn()}, 7000);

          });
     });
});

我认为您可能双重绑定了一次click事件，因此在前面解除绑定可能会解决该问题。 如果不是，只需将其添加到函数中即可。

    $("#analyse").one("click", function() {
         $("#analyse").unbind('click');
         $("#one" ).fadeOut( "fast", function() {
               clickHandler();
               $( "#two" ).fadeIn( "slow", function() {

                   setTimeout(function(){$("#three").fadeIn()},6000);
                   setTimeout(function(){$("#three").fadeOut()}, 7000);
                   setTimeout(function(){$("#four").fadeIn()}, 7000);

              });
         });
    });