setTimeout()与setInterval()

一、setTimeout与setInterval的用法（http://www.css88.com/archives/5804）

      setTimeout是超时调用，javascript是一个单线程的解析器，因此在一定时间内只能执行一段代码；setTimeout的第二个参数只是告诉javascript再过多久将当前任务添加到执行队列中，如果队列是空的，当前添加的代码就会立即执行；如果队列不是空的，就会等前面的代码执行完了之后再执行。（所以超时调用中的方法不一定就会在给定的超时时间到了之后立马执行，前面的代码有可能执行的时间超过这个给定的超时时间）

     超时调用每次调用只会执行一次，要想反复执行超时调用，setTimeout函数内部再添加setTimeout方法。

setTimeout ( function () {	
	var div = document.getElementById("div4");
	//var left = parseInt(div.style.left) + 5;
	var left = div.offsetLeft + 5;
	
	div.style.left = left + "px";
	if (left < 200) {
		setTimeout( arguments.callee, 50);
	}
	
}, 50);

     setInterval是间歇调用，调用一次一直执行，直到页面卸载。和setTimeout一样，指定的时间间隔表示的是何时将定时器的代码添加到队列中；setInterval确保了定时器代码规则的插入到队列中，但是，如果定时器代码之前的代码执行时间比定时器间隔要长，会出现如下情况：1、某些间隔可能会被跳过，2、多个定时器的代码执行之间的间隔可能会比预期的小。

var num = 0;
var max = 10;
var intervalId = null;

function incrementNumber () {
	num ++ ;
	
	if (num === max) {
		clearInterval (intervalId);
	}
}

intervalId = setInterval (incrementNumber, 500);

    所以一般用setTimeout方法来实现一个定时器（如第一个实例）。

var num = 0;
var max = 10;
//var intervalId = null;

function incrementNumber () {
	num ++ ;
	
	if (num < max) {
		 setTimeout (incrementNumber, 1000);
		 console.log("1");
	}
}

 setTimeout (incrementNumber,1000);

2017-1-13更新：

  问题模拟：下面的代码开始执行之后，如果先触发的是add这个事件，程序中就会存在多个定时器，最后clear掉的也是最后一个定时器，前面的定时器都无法被清除，如果知道定时器的id值也可以通过clearInterval()清除指定的定时器。后面的定时器的id覆盖了前面id，intervalTimer始终保存的是最后的定时器的id。

 var button = document.getElementById("clear");
    var add = document.getElementById("add"); 
    var intervalTimer = null; 
     zhixing();
    function zhixing() {
	     intervalTimer=setInterval(function(){
	    	console.log("in:"+intervalTimer); 
	        console.log(1);
	    },3000);
	    console.log("out:"+intervalTimer); //一般是一个数字，Number
    }
    
    button.onclick=function(){
	    alert("onclick...");
	    // clearInterval(2);
        clearInterval(intervalTimer);
        console.log("clear:"+intervalTimer); //一般是一个数字，Number
    };
   
    add.onclick = function() {
    	//zhixing();
    	intervalTimer=setInterval(function(){
	    	console.log("in:"+intervalTimer); 
	        console.log(22222);
	    },3000);
	    console.log("out:"+intervalTimer); //一般是一个数字，Number
    };

    总结： setTimeout调用一次执行一次，setInterval调用一次，一直执行直到页面卸载。

             setInterval能够确保定时器代码被规则的加入到队列中，但使用setInterval也可能会产生一些问题，例如：某些间隔会被跳过，

             多个定时器代码之间的执行间隔比预期的小。

             setTimeout可以模拟出setInterval的执行方式，而且可以确保前一个定时器在执行完成之前不会向队列中插入新的定时器代码，

             所以不会有缺失间隔的情况；也保证了下一次定时器代码执行之前，至少要等待指定的间隔。

             一个定时器的执行时间，和其同步执行的js代码有关，指定的间隔时间，只是定时器被加入到队列中的最小时间。

             将定时器的间隔时间设置为0时，代码会立即执行。

   var startTime = new Date();
    setTimeout(function () {
    console.log(new Date() - startTime);
    }, 100);
    
   setTimeout(function () {
    console.log("111111");
    }, 0);
    
     setTimeout(function () {
    console.log("22222");
    });