定时器的作用和应用场景

一、作用

1. 数组分块
   数组分块是一种使用定时器分割循环的技术，为要处理的项目创建一个队列，然后使用定时器取出下一个要处理的项目进行处理，接着再设置另一个定时器。
   function chunk(array,process,context){
   setTimeout(function(){
   //取出下一个条目并处理
   var item = array.shift();
   process.call(context,item);
   //若还有条目，再设置另一个定时器
   if(array.length > 0){
   setTimeout(arguments.callee,100);
   }
   },100);
   }

   var data = [1,2,3,4,5,6,7,8,9,0];
   function printValue(item){
       var div = document.getElementById('myDiv');
       div.innerHTML += item + '<br>';
   }
   chunk(data,printValue);
   

   数组分块的重要性在于它可以将多个项目的处理在执行队列上分开，在每个项目处理之后，给予其他的浏览器处理机会运行，这样就可能避免长时间运行脚本的错误.
   <b>一旦某个函数需要花50ms以上的时间完成，那么最好看看能否将任务分割为一系列可以使用定时器的小任务.</b>

2. 函数节流
   连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，有时候甚至会崩溃。
   <b>解决办法:</b>函数节流背后的基本思想是指，某些代码不可以在没有间断的情况连续重复执行。第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。
   var processor = {
   timeoutId: null,
   //实际进行处理的方法
   performProcessing: function(){
   //实际执行的方法
   },
   //初始处理调用的方法
   process: function(){
   clearTimeout(this.timeoutId);
   var that = this;
   this.timeoutId = setTimeout(function(){
   that.performProcessing();
   },100);
   }
   }
   processor.process();

二、应用

1. 使用定时器来调整事件发生顺序
   网页开发中，某个事件先发生在子元素，然后冒泡到父元素，即子元素的事件回调函数，会早于父元素的事件回调函数触发。如果，我们先让父元素的事件回调函数先发生，就要用到setTimeout(f, 0)。例如：
   div.onclick = function(){
   setTimeout(function(){
   alert(0);
   })
   }
   document.onclick = function(){
   alert(1);
   } //先执行1 后 0了
2. 用户自定义的回调函数，通常在浏览器的默认动作之前触发。比如，用户在输入框输入文本，keypress事件会在浏览器接收文本之前触发。因此，下面的回调函数是达不到目的.
   <input type="text" id="myInput">
   <script>
   myInput.onkeypress = function(event) {
   this.value = this.value.toUpperCase();
   }
   </script>
   用setTimeout改写
   <input type="text" id="myInput">
   <script>
   myInput.onkeypress = function(event) {
   setTimeout(function(){
   myInput.value = myInput.value.toUpperCase();
   });
   }
   </script>