如何在短暂延迟后重新开始间隔 jquery

Question

我正在尝试在文档准备好时重复一个时间间隔。间隔每 3 秒重复一次，但我希望它暂停 onmousemove 事件 5 秒，然后重新启动间隔。

到目前为止，这是我的代码：

$(document).ready(function(){
    var myInterval = setInterval(alertMe, 3000);

    function alertMe(){
        alert('jj');
    }

    $(document).mousemove(function(event){
        // I want delay 5 seconds and then initialize myInterval again
        setTimeout(function(){}, 5000);
        clearInterval(myInterval);
        setInterval(alertMe, 3000);
    });
});

参考答案一：JavaScript: How to get setInterval() to start now?

参考答案2：How to wait 5 seconds with jQuery?

Answer 1

您可以尝试下面的代码，只需对您的代码进行少量修改。您可以使用 mousedown 事件处理程序并在其中使用 clearinterval 并在 5 秒后使用 settimeout

设置新的间隔

$(document).ready(function(){
    var myInterval = setInterval(alertMe, 3000);
    var myTimeout;

    function alertMe(){
        alert('jj');
    }

    $(document).mousedown(function(event){
        clearInterval(myInterval); // clear interval as soon as mouse over
        clearTimeout(myTimeout);
        // I want delay 5 seconds and then initialize myInterval again
        myTimeout = setTimeout(function(){
           myInterval = setInterval(alertMe, 3000); // set interval after 5 seconds
        }, 5000);
    });
});

Answer 2

首先请注意，您的问题说您想在 mousedown 停止间隔，但您的代码使用 mousemove。

其次，不要使用 alert() 来测试它，因为它会阻止 UI 更新。请改用 console.log()。

最后，为了解决这个问题，在鼠标事件中使用setTimeout()调用来延迟间隔的重新启动。试试这个：

$(document).ready(function() {
  function logMe() {
    console.log('jj');
  }
  
  function startInterval() {
    return setInterval(logMe, 3000);
  }
  
  var interval = startInterval(), timeout;

  $(document).mousemove(function(event) {
    clearInterval(interval);
    clearTimeout(timeout);
    
    timeout = setTimeout(function() {
      interval = startInterval();
    }, 2000); // note 2000 delay here, as it compounds with the 3000 delay on the 
              // interval to make a 5000ms delay
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如何在短暂延迟后重新开始间隔 jquery

How to restart interval after a short delay jquery

jquery

delay

setinterval

clearinterval