需求：進入頁面後，先等待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的執行