关于setTimeout的妙用

定义

在指定的延迟时间以后调用一个函数或执行一个代码片断

这个是setTimeout最主要的功能，但也是很坑的地方，首先javascript实际上是运行在单线程的环境下，意味者定时器会在将来的某个时间支持，可是具体的执行的时间并不可以很准确的运行，容易受到其它时间的影响，好比DOM的计算、事件的执行、各类函数的执行和运算。可是咱们能够利用延迟执行的一些特性来达到咱们想要的功能。、

window.setTimeout(callbask, delay, [param1, param2, ...])

函数节流

程序运行过程当中对某个函数调用次数不少致使界面不断回流或者重排，这时候就须要对这个函数进行节流，好比监听touchmove、scroll事件等，能够限定函数在单位时间内只执行一次

    var throttle = function(method, context) {
        clearTimeout(method.tId);
        method.tId = setTimeout(function(){
            method.call(context);
        },100);
    }

控制执行

点击事件是会产生冒泡，执行的顺序是当前点击元素->父元素->...->document，一直往上执行到document。若是对当前元素的点击事件处理加上setTimeout的话，那么执行顺序就会改变为父元素->...->document->当前元素。这样就能够控制冒泡事件的执行顺序

    var parent = document.getElementById("parent");
    var child = document.getElementById("child");

    document.body.addEventListener("click", function(e) {
        console.log("body");

    }, false);

    parent.addEventListener("click", function(e) {
        console.log("parent");
    }, false);
    
    child.addEventListener("click", function(e) {
        setTimeout(function() {
            console.log("child");
    
        }, 0);
    }, false);
    
    /*
    *parent
    *body
    *child
    */

构建一个轮询任务

javacsript中已经有一个开启轮询的方法，就是setInterval，可是这种存在一个问题就是执行间隔每每就不是你但愿的间隔时间

好比有个轮询任务间隔是100ms，可是执行方法的时间须要450ms，那么在200ms、300ms、400ms原本是计划中执行任务的时间，浏览器发现第一个还未执行完，那么就会放弃二、三、4次的任务执行，而且在500ms以后再次执行任务，这样的话，其实再次执行的间隔就只有50ms。使用setTimeout构造轮询能保证每次轮询的间隔

    setTimeout(function(){
        alert(1);
        setTimeout(arguments.callee, 100);
    },100)

分块处理耗时计算

浏览器给javascript的运行规定了内存和时间，假如javascript运行的时间超过了规定时间，那么浏览器就会''报错''

    for(var i = 0; i < arr.length; i++){
        //耗时好久的嵌套循环或者运算
        doSomeing(arr[i]);
    }

假如在循环中作的处理的逻辑不是同步的话，那么能够把逻辑''分片''执行

    sertTimeout(function(){
        var item = arr.shift();
        dosomeing(item);
        if(arr.length <0 ){
            setTimeout(arguments.callee, 100);
        }
    }, 100);

延迟JS引擎的调用

GUI渲染线程和JS引擎的执行之间是互斥，当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JS引擎执行完毕时当即被执行。这样的结果会致使新内容很晚才能渲染完成，不少时候咱们须要让界面先渲染完成以后在去调用JS引擎来执行，那么可使用setTimeout来延迟JS引擎的调用

    var div = document.createElement('div');
    div.setAttribute('style', 'background-color:#233; width:100px; height:100px');
    document.body.appendChild(div);
    
    setTimeout(function() {
        alert(1);
    }, 100);