定时器

参考：https://wangdoc.com/javascript/async/timer.html

一、setTimeout()：指定某个函数或某段代码，在多少毫秒之后执行，它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。setTime函数接受两个参数，第一个参数是将要推迟执行的函数名或者一段代码，第二个参数是推迟执行的毫秒数。

注：如果回调函数是对象的方法，那么setTimeout使得方法内部的this关键字指向全局环境，而不是定义时所在的对象。

二、setInterval()：用法与setTimeout一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。

三、clearTimeout()、clearInterval() ：setTimeout和setInterval函数，都返回一个整数值，表示计数器编号。将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。setTimeout和setInterval返回的整数值是连续的。

四、运行机制：setTimeout和setInterval的运行机制，是将指定的代码移出本轮事件循环，等到下一轮事件循环，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就继续等待。这意味着，setTimeout和setInterval指定的回调函数，必须等到本轮事件循环的所有同步任务都执行完，才会开始执行。

五、setTimeout(f,0)的应用：

setTimeout的作用是将代码推迟到指定时间执行，如果指定时间为0，即setTimeout(f, 0)，它也不会立刻执行，它必须要等到当前脚本的同步任务，全部处理完以后，才会执行setTimeout指定的回调函数f。也就是说，setTimeout(f, 0)会在下一轮事件循环一开始就执行。总之，setTimeout(f, 0)这种写法的目的是，尽可能早地执行f，但是并不能保证立刻就执行f。

应用一：可以调整事件的发生顺序。

// HTML 代码如下
// <input type="button" id="myButton" value="click">

var input = document.getElementById('myButton');

input.onclick = function A() {
  setTimeout(function B() {
    input.value +=' input';
  }, 0)
};

document.body.onclick = function C() {
  input.value += ' body'
};




//点击按钮后，先触发回调函数A，然后触发函数C。函数A中，setTimeout将函数B推迟到下一轮事件循环执行， 
 //这样就起到了，先触发父元素的回调函数C的目的了。

应用二：用户自定义的回调函数，通常在浏览器的默认动作之前触发。 比如，用户在输入框输入文本，keypress事件会在浏览器接收文本之前触发。

// HTML 代码如下
// <input type="text" id="input-box">

document.getElementById('input-box').onkeypress = function() {
  var that = this;
  setTimeout(function() {
    that.value = that.value.toUpperCase();
  }, 0);
}

//该代码想要用户每次输入文本后，立即将字符转为大写。
//将代码放入setTimeout之中，就能使得它在浏览器接收到文本之后触发。