定时器的设计理念

时间碎片化

总所周知，浏览器是单线程运行的（web worker除外），当一个按钮点击的过程中，会产生UI事务和JavaScript事务，同时推送到队列中，等待执行。

业务较复杂的脚本执行耗时较长处理时间超过100ms时，导致UI更新和其他脚本事件无法执行，影响用户体验。
定时器的出现就是为了解决这个问题，设计理念是将复杂的脚本事务切割成单个事务，让耗时的事务让出时间，切换任务执行。

代码块

var btn = document.getElementById('myBtn');
btn.onclick = function(){
  onProcessMethod();
  setTimeout(function(){
      this.style.backgroundcolor = 'red';
    },50);
  finishedProcessMethod();
};

定时器中的事件会放到任务队列中，当btn.onclick事件执行完成之后，队列中的定时器事件开始执行，这样做的意义在于保证btn.onclik事件完整执行，50ms这个参数并不保证定时器事件一定执行。

Tips：setInterval()和setTimeout()最大的区别在于前者会重复向队列中推送任务