js中的setTimeout详解，和关于它的setTimeout(function(){}，0)问题

最新推荐文章于 2024-08-30 08:45:00 发布

牛长犇

最新推荐文章于 2024-08-30 08:45:00 发布

阅读量1.2w

点赞数 6

分类专栏： js基础 leon前端进阶之路文章标签： setTimeout

本文链接：https://blog.youkuaiyun.com/wxl1555/article/details/77628075

版权

leon前端进阶之路同时被 2 个专栏收录

70 篇文章

订阅专栏

js基础

50 篇文章

订阅专栏

欢迎访问我的个人博客：http://www.xiaolongwu.cn

先热身

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

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

上面的结果是 5 5 5 5 5

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

建议大家可以看这篇博文 promise和setTimeout执行顺序的问题，我在这篇文章中有讲到这个问题。

也就是说，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(k){				
			setTimeout(function() {
				console.log(k);
			}, 100);
		})(i);
	}

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

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

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

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