使用setInterval和setTimeout實現js定時重新整理功能
需求:進入頁面後,先等待5秒,之後重新整理按鈕開始旋轉,轉5秒後,停止旋轉,執行一次重新整理操作。
之後等待5秒,之後開始旋轉,轉5秒後,停止旋轉,執行一次重新整理操作。
如此反覆。
動圖如下:
思路:
關鍵需求是 轉5秒 等待5秒 再轉5秒,由於這裡是通過css樣式來實現旋轉和停止。這樣一個interval是無法完成旋轉和停止兩個動作的,所以需要在interval中加了一個timeout,這樣實現了等待5秒的功能。而且此時至始至終只有一個interval,而且只啟動一次
程式碼如下:
呼叫setTimer(5000);
function setTimer(seconds) { autoRefreshInterval = setInterval(function () { refresh_rotate_start(); listTimeout02 = setTimeout(function () { refresh_rotate_end(); searchBusList(); //重新整理完成之後就clear掉,執行旋轉5秒 //之後執行外部的等待5秒,在執行旋轉5秒 clearTimeout(listTimeout02); listTimeout02 = undefined; }, 5000); }, seconds); }
執行過程是:
先等待5秒,設定interval,並開始旋轉
再5秒後停止旋轉,執行一次search
之後把listTimeout02清空。此時interval中的func執行完成
其中關鍵程式碼是要清空內部的timeout。
如果不把listTimeout02清空,那麼就會不再旋轉但是仍會每5秒重新整理一次,為什麼呢?
應該是執行listTimeout02的等待旋轉結束的5秒操作時,外面的Interval仍會計時。那麼在旋轉結束,重新整理之後,外部interval也到時了,於是refresh_rotate_start() refresh_rotate_end(); busLineSearch();開始連續執行了。
而如果清空了listTimeout02,這樣在interval到時之後就會新建一個listTimeout02,執行5秒延時。又會於下一次refresh_rotate_start()開始旋轉的時候,到時。這樣就實現了以上需求。
一個js的執行順序要記住
就是如果你使用了setTimeout和setInterval,那麼其下面的語句是不會delaytime之後才執行的。setInterval和setTimeout巢狀也是遵循這個原則的。巢狀在setInterval中的setTimeout的delay time並不會影響setInterval的執行