setTimeout详解
1、定义：用于在指定的毫秒数后调用函数或计算表达式
2、语法：
（1）setTimeout(function, milliseconds, param1, param2, ...)
（2）setTimeout(code, milliseconds, param1, param2, ...)
注释：function/code——要调用的代码串或函数，milliseconds——延迟时间，param1, param2, ...——传给执行函数的其他参数
3、实例与解析
（1）第一个参数是函数
setTimeout( function(param1, param2) {
console.log('1秒后输出', param1, param2); // 1秒后输出 其他参数1 其他参数2
}, 1000, '其他参数1', '其他参数2');
（2）第一个参数是字符串：当第一个参数是字符串不是函数时，setTimeout函数会通过eval()将这个字符串解析为一段JS代码并执行，如果无法解析为JS代码，则会报错
setTimeout(
"console.log('1秒后输出')", // 1秒后输出
1000
);
（3）第一个参数是代码串，注意与第一个参数是字符串的情况比较
setTimeout(
console.log('直接输出，延迟时间不生效'), // 直接输出，延迟时间不生效
1000
);
4、setTimeout返回值
setTimeout有一个返回值，可以通过变量进行接收，这个值通过typeof进行判断后可以看出是一个number类型，这个值其实对应的是 setTimtout() 的ID，当页面定时器不断增多，需要对某一个定时器做操作时，通过 ID 就能够确定到该定时器并通过 clearTimeout() 清除该定时器。
var timeoutID = setTimeout(function(){
console.log('1秒后输出') // 1秒后输出
}, 1000);
console.log('定时器ID：',timeoutID) // 1
5、结束/阻止setTimeout的执行
var timeoutID = setTimeout(function() {
console.log('这是一个定时器')
}, 1000);
clearTimeout(timeoutID);
解析：上边代码并不会输出任何值，因为已经通过clearTimeout(timeoutID)方法取消了定时函数的执行，并且由于timeoutID的值是1，因此也可以通过 clearTimeout(1) 取消定时器的执行
6、回调函数的执行时机
为什么setTimeout的延迟时间设置为0时也不会立即执行？是因为浏览器是基于事件循环的，其中会有多个队列，页面的渲染是一个队列，JS代码的执行也是一个队列。JS代码执行时会创建一系列的任务，而这些任务按照先进先出的原则被加入到队列中。但是setTimeout是特殊的，当执行到setTimeout时，JS会将其拿出来放到一个单独的特殊队列中，这个队列中的任务在JS队列还有未执行完的任务时，永远不会被执行。
7、应用
（1）实现异步编程，alert会阻塞代码的执行是因为JS是单线程的，弹出框出现后如果不对其进行操作，则后面的代码就无法执行，如：
alert('弹出框');
var code = '弹出框后需要执行的代码';
console.log(code);
如果我们把alert代码放在setTimeout函数中，则可以避免这种情况的出现，如：
setTimeout(function() {
alert('弹出框');
}, 1000);
var code = '弹出框后需要执行的代码';
console.log(code); // 弹出框后需要执行的代码
（2）利用setTimeout循环输出1、2、3、4、5、.....
for (var i = 1; i <= 5; i++) {
setTimeout( function timer() {
console.log(i); //每隔1秒输出一个6，最后一共输出5个6
}, i * 1000);
}
解析：上面的代码并没有按照我们的预想依次输出1、2、3、4、5，即使把定时函数的时间设置为0秒也不会依次输出1、2、3、4、5，原因是，定时器都被放在了一个被称为队列的数据结构中，等待上下文的可执行代码运行完毕后，才开始运行定时器，此时的 i 的值已经是最后一次输出后再加1的值，即6。所以要想依次输出不同的数字，就需要把每个定时器所访问的变量独立起来，这就需要用到JS的闭包，因为闭包可以很好的区分开各个作用域，避免变量的混淆，如：
for (var i = 1; i <= 5; i++) {
(function(i){
setTimeout( function timer() {
console.log(i);
}, i * 1000); // 1、2、3、4、5
})(i);
}
也可以通过作用域在函数内部把变量隔离起来，在闭包内部访问i的时候，i就是一个常量：
for (var i = 1; i <= 5; i++) {
(function(){
var s = i; //把i赋值给另外一个变量
setTimeout( function timer() {
console.log(s); // 1、2、3、4、5
}, s * 1000);
})();
}
使用闭包可以依次输出数字，原因是改变了 i 的作用域，那如果我们把循环中的每个setTimeout都独立成一个作用域是不是也能实现同样的结果呢？在JavaScript中，每个函数是一个独立的作用域，但是“{}”是不能形成独立作用域的。而ES6中提出了一个新的关键字let，就可以声明一个仅对当前“{}”内部有作用的变量，如：
for (let i = 1; i <= 5; i++) {
setTimeout( function timer() {
console.log(i); //每隔1秒输出一个6，最后一共输出5个6
}, i * 1000);
}
8、setTimeout第一个参数是回调函数和代码串的区别
（1）第一个参数是代码串
for(var i = 1; i <= 5; i++){
setTimeout(console.log(i),i*1000);
}
解析：上面的代码一次性输出1、2、3、4、5，延迟时间并没有起作用，原因在于 console.log() 是方法的执行调用，调用setTimeout后是马上执行。那如何解决这个问题呢，就是把代码串放在函数中如：
for(let i = 1; i<= 5; i++ ){//为什么要用let定义而不是var定义，通过上边的分析也已经知道了
setTimeout(function(){
console.log(i);
}, i*1000);
}
（2）第一个参数是字符串
function test() {
var fun = function() {
console.log('第一个参数是字符串')
}
setTimeout('fun()', 1000)
}
test()
第一个参数是字符串的执行结果.png
解析：setTimeout的第一个参数是字符串时，JS内部将会调用eval()函数将字符串转换为JS可执行代码，但是为什么找不到 fun 函数？我们现在setTimeout中输出this看一下，如：
function test() {
var fun = function() {
console.log('第一个参数是字符串')
}
setTimeout('console.log(this);fun()', 1000)
}
test()
第一个参数是字符串时setTimeout中this的指向.png
解析：从执行结果可以看出this绑定window全局对象，因此eval()执行动态脚本的时，在全局作用域并没有找到定义在函数test内部的 fun函数，所以会报错。经过改造后，如：
var fun = function() {
console.log('Hello World!')
}
setTimeout(fun(), 1000)
解析：将上面代码复制到文本中执行会发现，延迟时间并没有生效，这是因为这里的fun()是一个函数执行而不是函数定义，如果想延迟执行，需要传递一个函数地址，如：
var fun = function() {
console.log('Hello World!')
}
setTimeout(fun, 1000)
或直接return一个函数，如：
var fun = function() {
return function(){
console.log('Hello World')
}
}
setTimeout(fun(), 1000)
或按照setTimeout的标准直接将一个函数作为其第一个参数，如：
setTimeout(function(){
console.log('Hello World!')
}, 1000)
解析：归根结底还是要搞清引用函数地址和执行函数的区别
总结：实际项目中，可以利用setTimeout的异步特性，解决一些问题，比如某个对象还未实例化，为了保证该对象在使用到时能够确保已经被实例化，就可以通过setTimeout来实现。通过setTimeout可以将一些耗时的代码放在setTimeout回调函数中执行以优化用户体验，但是使用setTimeout还有可能带来内存泄露的风险。
