setTimeout

setTimeout()方法在指定的ms数后调用函数或者表达式。

1. code/function 必传
2. milliseconds 可选，执行或调用code/function需要等待的时间，以ms计，默认为0；
3. param1, param2, …

setTimeout时间设置为0是什么意思呢？
众所周知js是单线程的，自上而下执行，只有同步执行完之后，才会执行队列中的东西。举个例子吧，便于理解。

setTimeout(function(){
	test()l
},1000)

1000ms之后里面的代码会加入队列中，但几时执行要看同步的内容是否执行完。
如果把时间设置为0的话，就会立即加入队列中，几时执行依然要看同步的内容。
下面是setTimeout时间设置为0的一些应用。
应用一：先触发父元素事件还是子元素事件。

var root = document.getElementById('root');
root.onclick = function A(){
   console.log('触发子元素事件');
}
document.body.onclick = function C(){
    console.log('触发父元素事件');
}

打印的结果不言而喻：

触发子元素事件
触发父元素事件

如果我们想先触发父元素事件的话，这时候setTimeout就派上用场了。

root.onclick = function A(){
    setTimeout(function(){
        console.log('触发子元素事件');
    },1000)
}

document.body.onclick = function C(){
    console.log('触发父元素事件');
}

打印的结果为：

触发父元素事件
触发子元素事件

应用二：实时更新输入框
html代码

<div>
  <div  id='root'>root</div>
   <input type="text" onkeydown="show(this.value)"/>
</div>

js代码

function show(val){
   root.innerHTML = val;
}

这样会存在一个问题：
每次展现的内容都是后一次输入的内容。
比如：我在文本输入框中输入123
但在div中展现的是12
这里之所以存在的问题是：
onkeydown事件和获取value值都是异步的。
因此在点击onkeydown事件的时候，value还没获取。
这时setTimeout的时间设置为0，就派上用场了。
html代码

<div>
  <div  id='root'>root</div>
   <input type="text" id='input'/>
</div>

js代码

input.onkeydown = function(){
    setTimeout(function(){
        root.innerHTML = input.value;
    },0)
}

除了这种方法，还有别的方法的，可以用onkeyup事件。

input.onkeyup = function(){
    root.innerHTML = input.value;
}

为什么用onkeyup事件就可以解决这个问题呢？
因为在onkeyup事件的时候就可以获取input输入框value 的值了。
看看下面的理解：

1. onkeydown 主要是获取和处理当前按下的键，例如按下enter键提交，在这一层并没有更新DOM元素。
2. onkeypress 主要获取和处理长按键，因为onkeypress在长按键的情况下会反复触发只到释放，这里并没有更新相关DOM元素的值，
3. onkeyup 这个时候已经更新了DOM，可以拿到最新的值，因此在这里主要处理DOM的值。

参考文章

1. setTimeout时间设置为0详细解析
2. 浅析函数防抖与函数节流