setTimeout和setInterval

由一个小例子比较setTimeout和setInterval

这几天本来在看闭包，但突然出现了这两个函数的使用，我还真没有仔细比较过这两个函数。

例：

//使用setTimeout
var fade = function(node){
    var level = 1;
    var step = function(){
        var hex = level.toString(16);
        console.log('#FFFF' + hex + hex);
        node.style.backgroundColor = '#FFFF' + hex + hex;
        if(level < 15){
            level += 1;
            setTimeout(step,100);
        }
    };
    step();
}
fade(document.body);

函数完成了一个背景图颜色的渐变。

var fade = function(node){
    var level = 1;
    var step = function(){
        var hex = level.toString(16);
        console.log('#FFFF' + hex + hex);
        node.style.backgroundColor = '#FFFF' + hex + hex;
        if(level < 15){
            level += 1;
        }else{
            clearInterval(start);
        }
    };
    var start = setInterval(step,100);
}
fade(document.body);

同样完成了背景色的渐变，但是，你看出不同了么？

区别：

setTimeout和setInterval都被用来处理延时和定时任务。区别在于：

1. setTimeout()方法用于在指定毫秒数后调用函数或者表达式，但是只执行一次。所以如果要处理定时任务，则需要递归的调用它。
2. setInterval()方法则可以在每隔指定的毫秒数循环的调用函数或者表达式。如许停止的话，需要调用clearInterval()方法把它清除。

JS是单线程的

由于这个问题，你会发现，这两个函数并不是精确地定时器，如果你每次执行函数时并打印出当前时间，就会发现，它的时间间隔并不是精确地一致。这是由于JS在设计时就不是多线程的。它其实是单线程的，那么，在定时时，由于其他的函数执行，那么定时器会被阻塞，结果就是，时间间隔被延迟了。

1. 仔细研究，可以发现setTimeout()是不规则的定时，它趋向于是在保证浏览器占用它的空余时间的同时保证时间间隔的一致性。
2. 而setInterval()则更想优先保证时间间隔的一致性。