如何在短暂延迟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);
    });
});

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

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

Answer 1

首先请注意，您的问题是要停止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>

Answer 2

您可以尝试以下代码，该代码仅对您的代码进行少量修改。 您可以使用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);
    });
});