使用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的执行