重置定時器setInterval沒有clearInterval

我有一個簡單的幻燈片自動改變圖像使用setInterval每5秒。重置定時器setInterval沒有clearInterval

用戶也可以使用上一個和下一個鏈接從一個圖像移動到另一個圖像。

如果用戶點擊上一個/下一個鏈接，定時器不會中斷，例如，如果定時器在用戶單擊鏈接3秒鐘後，下一個圖像只顯示2秒鐘，然後再次更改。

我知道我可以通過使用clearInterval然後再次使用setInterval來做到這一點，但有沒有更清晰的方式？

這裏是我的代碼，如果你需要它：

//Move to next image every 10 seconds unless paused. 
var timeInterval = 5000; 
var featureSlide = window.setInterval(function() { nextFeature("next")}, timeInterval); 

$("a#feature-prev").click(function() {   
    nextFeature("prev"); 
    return false; 
}); 

$("a#feature-next").click(function() { 
    nextFeature("next"); 
    return false; 
}); 



function nextFeature(action) { 

    var idNow = $("ul#features li:visible").attr("id"); 
    var pos = idNow.replace("feature-", ""); 

    //If image is currently animated do nothing 
    //If this isn't in place then multiple images are displayed 
    if ($("li#" + idNow).is(":animated")) { 
     return; 
    } else { 

     if (pos == 4 && action == "next") { 
      pos = 1; 
     } else if (pos != 4 && action == "next") { 
      pos++; 
     } else if (pos !=1 && action == "prev") { 
      pos--; 
     } else if (pos == 1 && action == "prev") { 
      pos = 4 
     } 


     pos = "feature-" + pos; 
     // Slide to next image 
     $("li#" + idNow).hide("slide", { direction: "right" }, 1000, function() { 
      $("li#" + pos).show("slide", { direction: "left"}, 1000); 
     }); 


    } 
}

謝謝！

來源

2010-06-17 Phil Molloy

如果不取消並重新啓動計時器，則無法重新啓動計時器。

或者，您可以完全停止使用setInterval，只需使用setTimeout即可。每當您顯示圖片時安排下一張圖片（如果我正在閱讀您的代碼，則在show的nextFeature之後）。然後間隔重置作爲邏輯流程的副產品發生，而不是一件特別的事情。

來源

2010-06-17 15:35:06

謝謝你。我會認爲我會堅持setInterval，因爲除非用戶單擊prev/next鏈接，否則需要每5秒調用一次相同的函數。我將添加clearInterval，然後再次使用setInterval在nextFeature開始時重新啓動計時器。 – 2010-06-18 09:39:14

@Phil：很酷。順便說一句，看起來我有點誤解你的代碼。如果你使用'setTimeout'方法，你希望在'hide'調用之後執行，而不是'show'調用（對不起，錯過了完成回調）。如果你這樣做了，那麼在任何瀏覽器計時器的分辨率內，每五秒鐘一次。但是，如果動畫仍然在發生的地方，您將不得不處理較高的情況，這可能會反對這種方法......玩得開心！ – 2010-06-18 09:50:55

重置定時器setInterval沒有clearInterval

回答

相關問題