时间戳

首页 > 解决方案 > 如何在短暂延迟jquery后重新启动间隔

jquery - 如何在短暂延迟jquery后重新启动间隔

问题描述

我正在尝试在文档准备好时重复一个间隔。间隔每 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：如何让 setInterval() 现在开始？

参考答案 2：如何使用 jQuery 等待 5 秒？

标签： jquerydelaysetintervalclearinterval

解决方案

首先请注意，您的问题说您想停止间隔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>

推荐阅读