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>