#关于setTimeout的妙用

崔晓明发布于2019-08-20 12:12 / 996人阅读

摘要：如果对当前元素的点击事件处理加上的话，那么执行顺序就会改变为父元素当前元素。这样的结果会导致新内容很晚才能渲染完成，很多时候我们需要让界面先渲染完成之后在去调用引擎来执行，那么可以使用来延迟引擎的调用

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

GPU云服务器云服务器 setTimeout javascript settimeout js定时器setTimeout 关于样式的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80854.html

解析setTimeout时间设置为0

摘要：要是当前代码耗时很长，有可能要等很久，所以并没有办法保证，回调函数一定会在指定的时间执行。需要监听文字改变，每一次改变都会调用一次回调函数，现在需要的一种实现是在用户停止键盘事件一段时间后，去发送一个请求。 1、开胃菜，setTimeout为何物首先看一下w3school上面对于setTimeout的解释 setTimeout(fn,millisec) 方法用于在指定的毫秒数后调用函...

zhigoo 2019-08-22 15:06 评论0 收藏0
::before和::after伪元素的妙用

摘要：下面是伪元素和伪元素的具体用法和使用规则作用在标签前后添加字符串使用规则后面一定要用把要添加的内容括起来，否则是无法显示的括号不一定需要添加。场景：假如有一天，你的在写一个前端项目，是关于一份点餐商家电话信息表，你啪塔啪塔地写完了，突然间项目经理跑过来找你，要求你在每一个商家的电话号码前都添加一个电话符号，来使得电话号码更直观和页面更美观。这个时候你就纠结了，这不是折磨人吗？这不是要我在...

番茄西红柿 2019-04-23 13:29 评论0 收藏0
javascript-从toString方法在判断复杂数据类型上的妙用，引申到对原型链的理解

摘要：所以，当我们使用时，不能进行复杂数据类型的判断，因为它调用的是，虽然也继承自，但在上重写了，而我们通过实际上是通过原型链调用了。关于 toString 方法在有关js的开发中使用应该是相当广泛的，这两天在看jQuery的源码，从 toString 本身了解与巩固了不少知识，写出来与大家一同分享。首先先上一段代码： var arr=[1,2,3]; toString.call(arr)...

sean 2019-08-20 10:41 评论0 收藏0
js中this的四种使用场景

摘要：最近读到了一篇介绍中的四种使用场景的文章，感觉总结的很好，所以我认真读了读，并且动手实践了其中的，与大家共享。最近读到了一篇介绍js中this的四种使用场景的文章，感觉总结的很好，所以我认真读了读，并且动手实践了其中的demo，与大家共享。原文链接：https://github.com/alsotang/n...遇到this，一直要记得这句：函数执行时，this总是指向调用该函数的对...

lk20150415 2019-08-20 19:08 评论0 收藏0
React 应用设计之道 - curry 化妙用

摘要：右侧展现对应产品。我们使用命名为的对象表示过滤条件信息，如下此数据需要在组件中进行维护。因为组件的子组件和都将依赖这项数据状态。化应用再回到之前的场景，我们设计化函数，进一步可以简化为对于的偏应用即上面提到的相信大家已经理解了这么做的好处。 showImg(https://segmentfault.com/img/remote/1460000014458612?w=1240&h=663...

sewerganger 2019-08-22 16:27 评论0 收藏0