时间碎片化
总所周知，浏览器是单线程运行的（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()最大的区别在于前者会重复向队列中推送任务
网友评论