之前对setTimeout()的理解很浅显，在设定的时间后执行任务。偶尔也遇到过某些任务不执行时，使用setTimeout()就能解决，但是一直没有理解其中的原理，最近看到一篇文章《关于setTimeout()你所不知道的地方》，梳理一下关于setTimeout()的知识点。
一、setTimeout基础用法
setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。
var timerId = setTimeout(func|code, delay)
setTimeout函数接受两个参数，第一个参数func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是推迟执行的毫秒数。
console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);
上面代码的运行结果是1,3,2，因为setTimeout指定第二行语句推迟1000毫秒再执行。
二、setTimeout参数使用
向setTimeout()传递一个字符串时，javascript引擎会先使用eval函数，将字符串转换成为代码，然后再执行，一方面出于安全考虑，另一方面为了便于引擎优化代码，一般总是采用函数名形式。
// 推荐
window.setTimeout(function() {
alert("Hello World!");
}, 500);
// 不推荐
window.setTimeout("alert("Hello World!");", 500);
注意：这里不推荐将要延迟执行的代码以字符串的形式传入setTimeout(),最好以匿名函数的形式传入。
三、对this指向的影响
setTimeout()回调函数中的this
如果被setTimeout推迟执行的回调函数是某个对象的方法，那么该方法中的this关键字将指向全局环境，而不是定义时所在的那个对象。
var x = 1;
var test = {
x: 2,
app: function(){
console.log(this.x);
}
};
setTimeout(test.app,1000);// 1
上面代码输出的是1，而不是2，这表示test.app的this所指向的已经不是o，而是全局环境了。
再看一个不容易发现错误的例子。
function User(login) {
this.login = login;
this.sayHi = function() {
console.log(this.login);
}
}
var user = new User('hello world');
setTimeout(user.sayHi, 1000);
上面代码只会显示undefined，因为等到user.sayHi执行时，它是在全局对象中执行，所以this.login取不到值。
为了防止出现这个问题，一种解决方法是将user.sayHi放在匿名函数中执行。
setTimeout(function() {
user.sayHi();
}, 1000);
上面代码中，sayHi是在user作用域内执行，而不是在全局作用域内执行，所以能够显示正确的值。
另一种解决方法是，使用bind方法，将绑定sayHi绑定在user上面。
setTimeout(user.sayHi.bind(user), 1000);
四、setTimeout运行机制
setTimeout和setInterval的运行机制是，将指定的代码移出本次执行，等到下一轮Event Loop时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。这意味着，setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行。
每一轮Event Loop时，都会将“任务队列”中需要执行的任务，一次执行完。setTimeout和setInterval都是把任务添加到“任务队列”的尾部。因此，它们实际上要等到当前脚本的所有同步任务执行完，然后再等到本次Event Loop的“任务队列”的所有任务执行完，才会开始执行。由于前面的任务到底需要多少时间执行完，是不确定的，所以没有办法保证，setTimeout和setInterval指定的任务，一定会按照预定时间执行。
setTimeout(someTask,100);
veryLongTask();
上面代码的setTimeout，指定100毫秒以后运行一个任务。但是，如果后面立即运行的任务（当前脚本的同步任务）非常耗时，过了100毫秒还无法结束，那么被推迟运行的someTask就只有等着，等到前面的veryLongTask运行结束，才轮到它执行。
setTimeout(function() {
console.log("Timeout");
}, 0);
function a(x) {
console.log("a() 开始运行");
b(x);
console.log("a() 结束运行");
}
function b(y) {
console.log("b() 开始运行");
console.log("传入的值为" + y);
console.log("b() 结束运行");
}
console.log("当前任务开始");
a(42);
console.log("当前任务结束");
// 当前任务开始
// a() 开始运行
// b() 开始运行
// 传入的值为42
// b() 结束运行
// a() 结束运行
// 当前任务结束
// Timeout
上面代码说明，setTimeout(f,0)必须要等到当前脚本的所有同步任务结束后才会执行。
五、setTimeout的应用
5.1调整事件的发生顺序
setTimeout(f,0)有几个非常重要的用途。它的一大应用是，可以调整事件的发生顺序。比如，网页开发中，某个事件先发生在子元素，然后冒泡到父元素，即子元素的事件回调函数，会早于父元素的事件回调函数触发。如果，我们先让父元素的事件回调函数先发生，就要用到setTimeout(f, 0)。
var input = document.getElementsByTagName('input[type=button]')[0];
input.onclick = function A() {
setTimeout(function B() {
input.value +=' input';
}, 0)
};
document.body.onclick = function C() {
input.value += ' body'
};
上面代码在点击按钮后，先触发回调函数A，然后触发函数C。在函数A中，setTimeout将函数B推迟到下一轮Loop执行，这样就起到了，先触发父元素的回调函数C的目的了。
用户自定义的回调函数，通常在浏览器的默认动作之前触发。比如，用户在输入框输入文本，keypress事件会在浏览器接收文本之前触发。因此，下面的回调函数是达不到目的的。
document.getElementById('input-box').onkeypress = function(event) {
this.value = this.value.toUpperCase();
}
上面代码想在用户输入文本后，立即将字符转为大写。但是实际上，它只能将上一个字符转为大写，因为浏览器此时还没接收到文本，所以this.value取不到最新输入的那个字符。只有用setTimeout改写，上面的代码才能发挥作用。
document.getElementById('my-ok').onkeypress = function() {
var self = this;
setTimeout(function() {
self.value = self.value.toUpperCase();
}, 0);
}
上面代码将代码放入setTimeout之中，就能使得它在浏览器接收到文本之后触发;
5.2分割耗时
众所周知javascript是单线程的，特点就是容易出现阻塞。如果一段程序处理时间很长，很容易导致整个页面hold住。什么交互都处理不了怎么办？
简化复杂度？复杂逻辑后端处理？html5的多线程？……
上面都是ok的做法，但是setTimeout也是处理这种问题的一把好手。setTimeout一个很关键的用法就是分片，如果一段程序过大，我们可以拆分成若干细小的块。由于setTimeout(f,0)实际上意味着，将任务放到浏览器最早可得的空闲时段执行，所以那些计算量大、耗时长的任务，常常会被放到几个小部分，分别放到setTimeout(f,0)里面执行(分片塞入队列)，这样即使在复杂程序没有处理完时，我们操作页面，也是能得到即时响应的。其实就是将交互插入到了复杂程序中执行。
var div = document.getElementsByTagName('div')[0];
// 写法一
for(var i=0xA00000;i<0xFFFFFF;i++) {
div.style.backgroundColor = '#'+i.toString(16);
}
// 写法二
var timer;
var i=0x100000;
function func() {
timer = setTimeout(func, 0);
div.style.backgroundColor = '#'+i.toString(16);
if (i++ == 0xFFFFFF) clearInterval(timer);
}
timer = setTimeout(func, 0);
上面代码有两种写法，都是改变一个网页元素的背景色。写法一会造成浏览器“堵塞”，而写法二就能就不会，这就是setTimeout(f,0)的好处。即：可利用setTimeout实现一种伪多线程的概念。
六, 如何使用setTimeout
关于setTimeout()的使用远不止这些，但是足见其强大，那么问题来了，需要在项目中大量使用么？视个人和项目而定吧；如不能熟练掌握，不建议多用。毕竟在某些情景之下，setTimeout作为一个hack的方式而存在的。