【javascript】setInterval定时器的问题

setInterval定时器的问题

一般js进行循环任务的时候才用两种方式 setTimeout 和 setInterval ,两种方式上理论上是可以进行切换的。但遇到某些地方会出现两种情况。

• 运行时间超过任务循环时间的情况

运行时间超过任务循环时间

当规定一个任务每隔1s触发，但是运行任务占用了2s，由于js是单线程的语言，因此下一个任务会在当前运行了1s就进入任务等待队列。
运行任务结束后已有两个任务准备立即运行。如果两个任务的运行时间非常短的话，会造成连续触发。

下面是模拟任务时间不同且有部分运行时间超过定时时间的例子

var i =  0 , j = 0,
    lastEndTime = 0,
    _timeid = setInterval(function(){
            var startTime = new Date();
            if(lastEndTime > 0){
                console.log('-----------period : ' + (startTime - lastEndTime));
            }

            if(i++ == 10){
                clearInterval(_timeid);
            }
            while(j < 10000000 / i ){ j++;}
            j = 0;
            var endTime = new Date();
            console.log('mission - ' + i );
            console.log('cost:' + (endTime - startTime) + "ms");
            lastEndTime = endTime.getTime();

    },20);

结果如下：

mission - 1
 cost:35ms
-----------period : 1
mission - 2
 cost:15ms
-----------period : 0
mission - 3
 cost:13ms
-----------period : 1
mission - 4
 cost:8ms
-----------period : 7
mission - 5
 cost:6ms
-----------period : 14
mission - 6
 cost:5ms
-----------period : 14
mission - 7
 cost:8ms
-----------period : 12
mission - 8
 cost:4ms
-----------period : 17
mission - 9
 cost:4ms
-----------period : 17
mission - 10
 cost:3ms
-----------period : 17
mission - 11
 cost:3ms

每隔20ms会将任务放在任务队列,上一个任务运行结束后才可以运行下一个任务。执行顺序虽然是固定的,但每一个任务之间的执行时间间隔却不会向规定20ms去运行。

使用setTimeout可以将任务的时间间隔固定。以下改写的定时任务

var i =  0 , j = 0,
    lastEndTime = 0,
    _timeid = setTimeout(function fn(){
            var startTime = new Date();
            if(lastEndTime > 0){
                console.log('-----------period : ' + (startTime - lastEndTime));
            }
            i++;

            while(j < 10000000 / i ){ j++;}
            j = 0;
            var endTime = new Date();
            console.log('mission - ' + i );
            console.log('cost:' + (endTime - startTime) + "ms");
            lastEndTime = endTime.getTime();
            if(i == 10){
                clearTimeout(_timeid);
            }else{
                setTimeout(fn,20);
            }
    },20);

运行结果:

mission - 1
 cost:33ms
-----------period : 25
mission - 2
 cost:14ms
-----------period : 21
mission - 3
 cost:13ms
-----------period : 26
mission - 4
 cost:8ms
-----------period : 21
mission - 5
 cost:6ms
-----------period : 22
mission - 6
 cost:6ms
-----------period : 22
mission - 7
 cost:4ms
-----------period : 21
mission - 8
 cost:4ms
-----------period : 23
mission - 9
 cost:3ms
-----------period : 24
mission - 10
 cost:4ms

虽然不是严格的20ms,毕竟采用实时添加任务在队列中,添加中途也会消耗一定的时间。但不会出现上一个任务结束后，下一个任务立即运行的情况。

我们可以知道使用setTimeout做循环任务能够很好控制运行任务但更加消耗资源，而setInteval能够有效的在精确时间插入任务,但是会有运行任务时间大于间隔时间的问题。所以在具体问题下要善用选择。