摘要：要是当前代码耗时很长，有可能要等很久，所以并没有办法保证，回调函数一定会在指定的时间执行。需要监听文字改变，每一次改变都会调用一次回调函数，现在需要的一种实现是在用户停止键盘事件一段时间后，去发送一个请求。
1、开胃菜，setTimeout为何物
首先看一下w3school上面对于setTimeout的解释
setTimeout(fn,millisec) 方法用于在指定的毫秒数后调用函数或计算表达式。
很简单，setTimeout() 只执行 fn 一次，到底什么时候执行取决于第二个参数millisec设定的毫秒数，所以很多人习惯上称之为延迟，无非就是延迟一段时间后再执行里面的代码。
setTimeout(function(){
console.log("我是setTimeout");
}, 1000);
正常情况下，我是setTimeout 这句话并不会马上输出而是等1000毫秒以后会在浏览器的控制台输出。
2、主菜，js是单线程的OK，看一个例子，这个例子的输出结果是什么？
setTimeout(function(){
console.log(1);
}, 0);
console.log(2);
console.log(3);
出乎一些人的意料，得到的结果竟然是2、3、1。这似乎不按套路出牌啊，明明是等待了0毫秒也就是不等待直接输出啊，为啥1却在最后输出了呢？
这就需要搞清楚一个很重要的概念：js是单线程的，单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
其实很好理解，就像大家去超市买东西一样，所有买东西的人都需要在收银台排队结账，正常情况下每个收银台同一时间只能为一位顾客结账，这位顾客结账完成才能为下一位顾客服务。
而浏览器的内核是多线程的，它们在内核制控下相互配合以保持同步，一个浏览器至少实现三个常驻线程：javascript引擎线程，GUI渲染线程，浏览器事件触发线程。
javascript引擎是基于事件驱动单线程执行的，JS引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS线程在运行JS程序。
GUI渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的，当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
事件触发线程，当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。（当线程中没有执行任何同步代码的前提下才会执行异步代码）
其实，当js代码执行遇到setTimeout(fn,millisec)时，会把fn这个函数放在任务队列中，当js引擎线程空闲时并达到millisec指定的时间时，才会把fn放到js引擎线程中执行。
setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在"任务队列"的尾部添加一个事件，因此要等到同步任务和"任务队列"现有的事件都处理完，才会得到执行。
HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，如果低于这个值，就会自动增加。在此之前，老版本的浏览器都将最短间隔设为10毫秒。另外，对于那些DOM的变动（尤其是涉及页面重新渲染的部分），通常不会立即执行，而是每16毫秒执行一次。这时使用requestAnimationFrame()的效果要好于setTimeout()。
需要注意的是，setTimeout()只是将事件插入了"任务队列"，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。要是当前代码耗时很长，有可能要等很久，所以并没有办法保证，回调函数一定会在setTimeout()指定的时间执行。
3、甜品，setTimeout的妙用其实setTimeout是有一些妙用的，这里简单列举几个。
函数去抖让一个函数在一定间隔内没有被调用时，才开始执行被调用方法。比如当你在使用 google 搜索内容的时候，有些关键词输入到一半，谷歌会展示一个可选列表，根据你当前输入的内容作出的一个猜测联想。需要监听文字改变，每一次改变都会调用一次回调函数，现在需要的一种实现是在用户停止键盘事件一段时间后，去发送一个请求。
var debounce = function(method, context) {
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
},100);
}
轮训任务
js中可以使用setInterval开启轮询，但是这种存在一个问题就是执行间隔往往就不是你希望的间隔时间。
比如有个轮询任务间隔是100ms，但是执行方法的时间需要450ms，那么在200ms、300ms、400ms本来是计划中执行任务的时间，浏览器发现第一个还未执行完，那么就会放弃2、3、4次的任务执行，并且在500ms之后再次执行任务，这样的话，其实再次执行的间隔就只有50ms。使用setTimeout构造轮询能保证每次轮询的间隔。
setTimeout(function () {
console.log("我被调用了");
setTimeout(arguments.callee, 100);
}, 100);
延迟js引擎的调用
var div = document.createElement("div");
div.innerHTML = "我是一个div";
div.setAttribute("style", "width:200px; height:200px;background-color:#f00; ");
document.body.appendChild(div);
setTimeout(function() {
console.log("我被调用了");
}, 1000);
虽然setTimeout有一些妙用，但是他确实是在宏观任务队列中新增任务了，所以万万不能滥用啊。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/93172.html
摘要：禁止内联脚本执行规则较严格，目前发现使用。合理使用上报可以及时发现，利于尽快修复问题。因为事件会从目标元素一层层冒泡至对象。允许给一个事件注册多个监听。表示在捕获阶段触发，表示在冒泡阶段触发。 关于【Step-By-Step】 Step-By-Step (点击进入项目) 是我于 2019-05-20 开始的一个项目，每个工作日发布一道面试题。每个周末我会仔细阅读大家的答案，整理最一份...
摘要：浏览器是多进程的，而浏览器的内核渲染进程是多线程的。如果已经将回调函数放进任务队列，但是主线程正在执行一个非常耗时的任务，当这个任务执行完毕后，主线程去任务队列中取任务，这个时候，就会出现连续执行的情况，也就是说相当于失效了。 前言 在刷笔试题的时候，经常会碰到setTimeout的问题，只知道这个是设置定时器；但是考察的重点一般是在一个方法中包含了定时器，定时器中的打印和方法中打...
摘要：问题引入接触过事件循环的同学大都会纠结一个点，就是在中和执行顺序的随机性。当队列被执行完，或者执行的回调数量达到上限后，事件循环才会进入下一个阶段。嵌套的在下一个事件循环的阶段执行回调输出嵌套的。 问题引入 接触过事件循环的同学大都会纠结一个点，就是在Node中setTimeout和setImmediate执行顺序的随机性。 比如说下面这段代码： setTimeout(() => { ...
摘要：如果执行的准备时间大于了，因为执行同步代码后，定时器的回调已经被放入队列，所以会先执行队列。 showImg(https://segmentfault.com/img/remote/1460000018998584); 阅读原文 浏览器中的事件轮询 JavaScript 是一门单线程语言，之所以说是单线程，是因为在浏览器中，如果是多线程，并且两个线程同时操作了同一个 Dom 元素，...
阅读 843·2021-10-12 10:11
阅读 774·2019-08-30 15:53
阅读 2101·2019-08-30 14:15
阅读 2831·2019-08-30 14:09
阅读 1089·2019-08-29 17:24
阅读 885·2019-08-26 18:27
阅读 1186·2019-08-26 11:57
阅读 2035·2019-08-23 18:23
