平时我们或多或少会遇到这样的场景：延迟几秒执行某个操作，或者每隔几秒执行某个操作。实现也很简单使用setTimeout 和setInterval两个函数就可以解决大多数问题。但我们真的了解setTimeout 吗？或者说了解其背后的事件循环机制吗？
- setTimeout()接受两个参数，第一个是回调函数，第二个是推迟执行的毫秒数。
console.log(1);
setTimeout(function(){console.log(2);},1000);
console.log(3);
上面代码执行结果是1，3，2. 原因是setTimeout()将第二行推迟到1000毫秒之后执行。
理解这个很简单，代码先打印1，然后启动一个定时器定时1秒，然后打印3，接着1秒后时间到执行定时器中的回调函数打印2。
如果我们修改下代码
console.log(1);
setTimeout(function(){console.log(2);},1000);
console.log(3);
func(); //假设这个函数比较耗时，需要2秒的时间
console.log(4);
再修改下代码
console.log(1);
setTimeout(function(){console.log(2);},0);
console.log(3);
func(); //假设这个函数比较耗时，需要2秒的时间
console.log(4);
这两段代码的执行结果分别是什么呢？
A: 1,2,3,4 B: 1.3,4,2 C:1,3,2,4
我们来看看setTimeout 使用时要特别注意的点：
setTimeout其实只是将事件（定时事件）插入到“任务队列”中，必须等到当前代码（执行栈）执行完，主线程才会去执行它的指定的回调。
所以上面两端代码的打印结果都是1，3，4，2。
来分析下首先代码打印1，然后执行setTimeout将定时事件（第一个规定1秒后执行，第二个规定了0秒后执行即“立即执行”）插入到“任务队列”，接着运行打印3，再然后运行func函数这里耗时2秒中，注意这里定时事件不会触发，不管是1秒还是0秒，然后打印4。至此执行栈执行完成，主线程开始查看任务队列，发现有定时事件，符合条件后执行相应回调，即打印2。随意上面两段代码的区别是一个打印完4后需要等1秒后打印2，另一个打印4后就立即打印2了。
经过上面的代码分析其实我们可以得出一个结论：setTimeout指定的时间不是从运行完setTimeout开始计算而是从当前执行栈执行完开始计算。
setTimeout(function(){console.log(1);}, 2000);
func();//该函数耗时5秒。
也就说上面的代码打印1需要等待7秒。
特别说明：HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，如果低于这个值，就会自动增加。在此之前，老版本的浏览器都将最短间隔设为10毫秒。所以指定setTimeout第二个参数为0其实会自动变为4，当然一般情况下可以认为两者效果等价。
引申setTimeout运行的本质其实是往“任务队列”中插入了一个事件。这个和点击事件onClick 等其他事件一样，其实都是往"任务队列"中插入事件。js 检查任务队列需要在当前执行栈执行完成后，主线程空了才去检查任务队列中。所以如果我们像上面的例子中有一个耗时的函数func导致执行栈执行完需要很长事件，那么不光是setTimeout会出现你意料之外的结果，而且页面上的一些其他的点击事件都会失效，给用户一种卡死个感觉。解决方法就是尽量优化代码减少运行事件，或者将函数包装成异步执行函数。
网友评论