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); 

       }); 
     }); 
    });