关于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);
时间: 2024-11-03 22:34:51

关于setTimeout的妙用的相关文章

setTimeout的妙用2——防止循环超时

上个周日,介绍了如何使用setTimeout代替setInterval进行间歇调用,这个周日,继续来讲<JavaScript高级程序设计>这本书里面,对于setTimeout的另一种妙用--防止循环超时 [这是铺垫,为故事的高潮埋下伏笔] JS是单线程的,一个代码块里面的代码,只能按顺序从上到下执行,所以如果中间有一块代码,执行起来非常耗时,就会导致下面的代码无法执行,出现浏览器假死的状态. JS的耗时操作,常见的有两种  1.向服务器发起请求   2.对数组的循环操作  (当然,还有一种,就

JS异步执行之setTimeout 0的妙用

最近在工作中遇到一些问题,大致是关于js执行问题的.由于没搞清执行顺序,导致出现了一些奇怪的bug. 所以这里整理一些有关异步执行的知识(冰山一角角)... 大家都知道js是单线程的,执行起来是顺序的,在顺序的业务逻辑中当然没有问题.如果遇到可以并发执行的业务逻辑,再排队就很低级了,所以需要异步执行! 1.什么是异步? setTimeout(function(){ console.log(0); },0) console.log(1); // 先打印 1 // 再打印 0 比方说有些饭店你去吃饭

Promise的前世今生和妙用技巧

浏览器事件模型和回调机制 JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的.同时出于对UI线程操作的安全性考虑,JavaScript和UI线程也处于同一个线程中.因此对于长时间的耗时操作,将会阻塞UI的响应.为了更好的UI体验,应该尽量的避免JavaScript中执行较长耗时的操作(如大量for循环的对象diff等)或者是长时间I/O阻塞的任务.所以在浏览器中的大多数任务都是异步(无阻塞)执行的,例如:鼠标点击事件.窗口大小拖拉事件.定时器触发事件

妙味课堂——JavaScript基础课程笔记

集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热身课程 写JS的步骤 先实现布局 想出实现原理 了解JS语法 希望把某个元素移除的实现 display: none; 显示为无 visibility: hidden; 隐藏 width \ height 透明度 left \ top 拿与背景色相同的div盖住该元素 利用margin值 …… 获取元

函数返回值(return)、定时器(setTimeout、setInterval)

一.函数的返回值:return 1.函数名+括号=return后面的值 <script> function fn1(){ return 100; } alert(fn1()); // 100 fn1()=return后面的值100 </script> 2.所有函数默认的返回值:未定义 3.return后任何代码都不被执行二.函数实参的集合:arguments 什么时候用arguments?---> 当函数参数的个数无法确定的时候实例: <script> funct

setTimeout的异步传输机制

setTimeout是异步的,在设置完setTimeout后,指定代码会在设定的时间后加入到任务队列,但并不是立即执行,js是单线程语言,所有的代码按顺序执行,即同步执行,同步执行的代码放在执行队列中,而异步执行的setTimeout放在任务队列中,执行顺序是先执行完执行队列中的代码再去查看任务队列中是否有要执行的代码: 这段代码看上去好像4应该比5先打印出来,但实际上是先打印出5再打印出4: 就如上面所说的,1,3,5都放在执行队列中,而4,2放在任务队列中,所以4,2要等执行队列中的1,3,

setTimeout ,setInterval

1.setInterval是间隔执行,间隔多久执行一次,执行多次 setInvertal(function(){},500) 2.setTimeout是延迟执行,执行一次 setTimeout(function(){},500) 清除定时器 param=setInterval(function(){},300) clearInterval(param)关闭定时器

JS setTimeout clearTimeout

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>计时器</title> </head> <script type="text/javascript"> var num=0; var i; fu

《众妙之门——精通CSS3》一书知识点剖析

不得不佩服京东的速度,昨天刚下单的两本书今天上午就到了.其中一本是全彩页的<众妙之门 - 精通CSS3>,细看了前几十页,书上的叙述方式给我的印象其实不如“彩页”来的讨喜——接连说上几个例子,扔个例子的链接(没源码下载,要自己手动输入,而且近乎所有的例子页面均已失效),未经细剖便草草了事,感觉倒是适合作为厕所读物(汗).... 虽然书中不细剖,却也不能白花银子,不妨自己实打实地查资料.记笔记,不辜负了早上送出的老毛. P21 此处提到的例子动用了 -webkit-background-clip