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

您也可以取消绑定而不是标志：

$（＆＃34;＃分析＆＃34）。解除绑定（＆＃39;单击＆＃39）;

但通常即使双击也只能调用一次函数。所以我建议之前尝试：

$("#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);

          });
     });
});

我认为你可能会对点击事件进行双重绑定，因此在前面取消绑定可以解决它。如果不是只是将其添加到函数内部。

    $("#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);

              });
         });
    });

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

2 个答案: