setInterval执行太快

Question

在他们自己的情况下，关于这个问题有很多好的帖子，但是在我的情况下，我找不到任何好的答案。

我在不同文件中有多个setInterval，这些文件可以发挥自己的作用：

1. 该应用程序是一个幻灯片目录，我有一个主要的setInterval ，用于处理主应用程序中自定义幻灯片的循环。

    mainInterval = setInterval(changeSlide, 20000); execute after 20 seconds function changeSlide(){ // .... do changes } 

2. 当客户单击幻灯片的信息时，另一个模式将用作空闲计时器，但是当没有用户交互时，模式将关闭。 此函数位于另一个javascripts文件中。

    $('.item').click(function(e){ // .. show modal idleInterval = setInterval(timerIncrement, 1000); // executes every 1 secs. }); // This will reset idleTime when user interact with mousemove $(this).mousemove(function (e) { idleTime = 0; }); // This will reset idleTime when user interact with keypress. // Since there is a side panel search engine will appear // when a button search is clicked. $(this).keypress(function (e) { idleTime = 0; }); function timerIncrement() { idleTime = idleTime + 1; // increment whenever the function is called // idleTime is more than 10 secs? // If true (10 secs is met) close the search panel if open // and close the modal. if (idleTime > 10) { // ... close the search panel if open // ... hides modal clearInterval(idleInterval); } } 

---

更新

由于单击.item时将显示一个模态，以避免出现多个setInterval。

当模式隐藏事件触发时，我处理clearInterval(IdleInterval) 。

$('#item-modal').on('hide.uk.modal', function(e){
    clearInterval(idleInterval);
});

---

现在最大的问题是，当我打印console.log(idleTime);时，模式会在实际的10秒之前关闭console.log(idleTime); 砰！ 我看到计时器执行得比平常快。

Answer 1

您没有在每次单击.item时重置间隔，这可能会导致运行多个间隔时出现问题

 // explicitely save the state you will be modifying to the window var idleInterval = null var idleTime = 0 $('.item').click(function(e) { // clear the interval if it's set clearInterval(idleInterval) idleInterval = setInterval(timerIncrement, 1000); }); var resetIdleTime = function(e) { idleTime = 0; } $(this) .mousemove(resetIdleTime) .keypress(resetIdleTime); function timerIncrement() { idleTime = idleTime + 1; console.log(idleTime) if (idleTime > 2) { alert('show modal') clearInterval(idleInterval); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="item">this is the item</div>