js中关于setTimeout异步的思考

js中关于setTimeout的思考

首先看看下面的代码会打印出什么？

 for(var i =0;i<5;i++){
        setTimeout(function(){
            console.log(i);
        },1000);
    }

控制台在一秒后输出5次5

这里和浏览器的事件队列和事件循环机制有关系。

也就是说，setTimeout是一个宏任务，它在事件队列里排在了script标签这个宏任务的后面。

浏览器会先执行第一个宏任务，也就是读取script标签中的代码，遇到setTimeout时，将其放进事件队列中等待执行，循环5次，也就是事件队列中放了5个setTimeout，这时第一个事件执行完毕，再执行下一个宏任务，也就是依次执行setTimeout，这时i已经变成了5，所以会打印出5 5 5 5 5；

那么上面的代码我们改如何修改才能打印出0~4呢？

for(var i =0;i<5;i++){
        (function(j){
            setTimeout(function(){
            console.log(j);
        },j*1000);
        })(i)
       
    }

来看控制台打印结果

没错，上面的代码可以打印出我们想要的结果，他的结果为0~4，可是为什么呢？

我们所采用的解决方案是闭包，闭包可以延长其私有变量的生命周期，意思就是内部私有变量和函数保存下来，一直在内存中，之后到你用时他再给你

那么我们可以再把上面的题目延伸一下

    for (var i = 0; i < 5; ++i) {
	  	setTimeout(function () {
	   		console.log(i);
	  	},0);
	}
		
console.log(0);
//在for循环后面加了段代码，而且把延时器事件的触发时间改为了0，请先想想结果会是什么？

来看看控制台输出了什么

其实道理很简单，还是我在刚开始解释的那样，setTimeout是排在script标签之后的宏任务，先读取script标签时，首先会打印出0，然后再执行setTimeout事件，依次打印出5，可以理解这里其实和setTimeout的延迟执行时间没关系。