只看这一篇就够了:定时器与延时器异步执行的本质

定时器：setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
延时器：setTimeout() - 在指定的毫秒数后执行指定代码。

定时器与延时器均为异步程序，放在异步队列里执行！

敲黑板：重点来了！重点来了！重点来了！

定时器异步的执行本质是：匿名函数里的代码异步执行

setTimeout(function(){
  console.log(1);
},4000)
setTimeout(function(){
  console.log(1);
},4000)  //执行结果：4s后控制台上同时打印出两个1
//开启了2个延时器（相当于在告诉系统：4s后执行代码），这两个延时器被放在等待
//队列里，在普通队列的代码执行完后4s后同时执行console.log(1);

例子1：

for (var i = 1; i <= 5; i++) {
setTimeout( function timer() {
	console.log(i);
}, 1000 );
}    //结果：输出五次6
解析：定时器为异步事件，所以每次for循环执行到定时器的时候，开启定时器后，把
它放到异步等待队列中，循环中共开启5个定时器，等待循环执行完毕后，i变为6，所
以输出5个6（1000毫秒后，5个6同时输出，再次验证了，异步程序定时器/延时器，异
步的是异步的是函数里的代码）

例子2：

for(var i = 0 ; i < 10 ; i ++){
	setTimeout(function(){
		console.log(i);
	},0)
}   //10个10
//虽然间隔时间为0ms，但定时器本质为异步事件，所以依然会在for循环之后执行

例子3：

for (var i = 1; i <= 5; i++) {
	(function(i){
		setTimeout( function timer() {
			console.log(i);
	    },  1000 );
	})(i);
}    //输出结果为1,2,3,4,5
解析：使用闭包可以解决上述问题，前面跟上面一样，for循环开启五个定时器放在等
待队列中，循环执行完毕后，定时器中的变量i向上访问时，会首先从它的外部函数中
找i，正好找到对应的i

例子4：

for(var i = 0 ; i < 10 ; i ++){
	 (function(v){  //自由变量v
		setTimeout(function(){
	    	console.log(v);
		},10)
	 })(i)   
}   //0 ~ 9

例子5：

for (var i = 0; i < 5; i++) {
	(function(){
		setTimeout( function() {
			console.log(i);
		},  i*1000 );
	})(i);
}    //5个5（每隔1秒输出一个）

例子6：

for(var i=0;i<3;i++){
	setTimeout(function(){
		console.log(i);	
	},(function(){
		var b=i*1000;
		console.log(b);
		return b;
	})());
}  //0 1000 2000  3  3  3

------------------------------我是简要说明的分割线------------------------------
同步程序：任务依次往下进行；
异步程序：任务可以同时进行，互不影响。
同步队列：同步程序的代码执行队列
异步队列：异步程序的代码放在这个队列里，等待同步队列里的代码执行完后，再执行
----------------------------我是简要说明结尾的分割线----------------------------

有哪儿没描述清楚的，欢迎留言探讨！

只看这一篇就够了:定时器与延时器异步执行的本质

定时器异步的执行本质是：匿名函数里的代码异步执行

猜你喜欢