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);
});

现在最大的问题是模态在满足实际10秒之前关闭，当我打印console.log(idleTime);爆炸！我看到计时器执行速度比平时快。

Answer 1

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

＆＃13;

＆＃13;

// 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);
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;