欢迎使用CSDN-markdown编辑器

来源：互联网发布：程序员面试宝典微盘编辑：程序博客网时间：2024/06/07 00:56

setTimeout和setInterval区别

setTimeout只会执行一次，而setInterval则会执行多次直到调用clearInterval清楚定时器才会停止。因为js是单线程的，这两个函数
只会在你设定的时间点插入js引擎维护的代码队列中，并不会立即执行从下面例子中就可以看出来

(function(){var a;setTimeout(function(){    alert(a);//result 10},100);a = 10;})();

但是setTimeout和setInterval还有个最大的区别看下面两个列子

(function(){    //code 1    setTimeout(function(){        //code 3        setTimeout(arguments.callee，100);    },100);    //code 2})();(function(){    //code 1    setInterval(function(){        //code 3    },100);    //code 2})();

上面两个列子从功能上看似没有区别，实际上还是有点区别的。其中setInterval可能会导致两个结果
1.有些时间间隔或许会跳过
2.实际执行的时间间隔可能小于我们预期设定的时间间隔
我们首先分析第一种情况出现的原因：
假设code 1（执行50ms）和code 2（执行150ms）共执行200ms，按照理论上会在第50ms是会在js引擎代码队列中插入code 3，150ms在插入code 3，250ms处再次插入code 3，但实际上是不会的，因为js引擎代码队列只允许我们插入一份未执行的code 3代码块。故150ms是要插入的code 3时js代码队列中已经有一份在50ms是插入的code 3未执行，故没有成功插入到队列中所以这个时间点的间隔会被跳过。
而setTimeout则不会，。我们也可以同样来分析：假设code 1（执行50ms）和code 2（执行150ms）共执行200ms，在50ms是插入code 3，在code 3未执行前是不会产生新的定时器，也就是说没有新的code 3插入到js代码队列中，所以不会出现时间间隔被跳过的情况。
我们看下第二种情况出现的列子：

(function(){        var oDiv = document.getElementById("moveDiv2");        oDiv.onclick = function(){            console.time('test1');            //console.time('hello')            for (var i = 0; i < 5000; i++) {                var div = document.createElement('div');                document.body.appendChild(div);                document.body.removeChild(div);            }            //console.timeEnd('hello');            var iNum = 0;            var timer = setTimeout(function(){                iNum++;                console.log('test1'+iNum);                for (var i = 0; i < 100000; i++) {                    var div = document.createElement('div');                    document.body.appendChild(div);                    document.body.removeChild(div);                }                //console.log(iNum)                timer = setTimeout(arguments.callee, 10);                if(iNum>10){                    console.timeEnd('test1')                    clearInterval(timer);                }            },10);        }    })();    //耗时约: test1: 4395.000ms

(function(){        var oDiv = document.getElementById("moveDiv");        oDiv.onclick = function(){            console.time('test');            //console.time('hello')            for (var i = 0; i < 5000; i++) {                var div = document.createElement('div');                document.body.appendChild(div);                document.body.removeChild(div);            }            //console.timeEnd('hello');            var iNum = 0;            var timer = setInterval(function(){                iNum++;                console.log('test'+iNum);                for (var i = 0; i < 100000; i++) {                    var div = document.createElement('div');                    document.body.appendChild(div);                    document.body.removeChild(div);                }                //console.log(iNum)                if(iNum>10){                    console.timeEnd('test')                    clearInterval(timer);                }            },10);        }    })();    //耗时约: test: 3697.000ms

从上面列子中明显看出来setInterval的时间间隔比预期的setTimeout要短一点

ps:第一次玩blog，好激动，从网上看了好多setTimeout和setInterval的分析的博客，也算是自己写个总结给自己看，前端菜鸟要是有问题还望大神指正~

0 0