关于setTimeout的妙用

Posted 2020-10-04 闷音

定义

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

这个是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本来是计划中执行任务的时间，浏览器发现第一个还未执行完，那么就会放弃2、3、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);