setTimeout

来猜测一下谁先出现

settimeout.png

结果：

Paste_Image.png

settimeout与0ms

settimeout又最小的执行时间，当指定的时间小于该时间时，浏览器会用最小的允许的时间最为settimeout的时间间隔。
不同的浏览器实际情况不同，IE8和更早的IE的时间精确度是15.6ms。不过，随着HTML5的出现，在高级版本的浏览器（Chrome、ie9+等），定义的最小时间间隔是不得低于4毫秒，如果低于这个值，就会自动增加
所以setTimeout(fn, 0)实现了插队操作，要求浏览器尽快处理回调函数。
setTimeout(fn, 0) 的应用场景：改变任务的执行顺序。

document.querySelector('#one input').onkeydown = function() {   
  document.querySelector('#one span').innerHTML = this.value;   
};   
document.querySelector('#second input').onkeydown = function() {   
  setTimeout(function() {   
    document.querySelector('#second span').innerHTML = document.querySelector('#second input').value;   }, 0);
};

当你两个表单输入内容时，第一种写法会显示此次输入前的内容，使用settimeout的函数会获取到输入框的内容。

虽然使用onkeyup就可以获取输入框的值，但是存在以下两个问题：

1. 长按键，不会触发onkeyup
2. 快速输入时，事件的触发顺序并不是以onkeydown>onkeypress>onkeyup顺序触发。

而使用settimeout的执行顺序是：```onkeydown>onkeypress>function>onkeyup

settimeout与回调函数中的this

setTimeout是window提供的方法，所以回调函数中的this指向的是window对象。

var a = 1;   
var obj = {   
  a: 2,   
  test: function() {   
    setTimeout(function(){   
      console.log(this.a);   
    }, 0);   
  }   
};   
obj.test();  //  1

setTimeout的参数

大家都知道第一个参数是回调函数，第二个参数是延时时间，那么传入第三，第四的参数是什么？

setTimeout(function (a, b) {
  console.log(a, b);   // 1， 2
}, 0, 1, 2)

setTimeout第三个及以后的参数会作为回调函数的参数。