威尼斯www.9778.com-威尼斯正版官方网站

setTimeout()和setInterval() 何时被调用执行(非多线程).RP

日期:2020-01-04编辑作者:Web前端技术

图片 1

定义

setTimeout()和setInterval()经常被用来处理延时和定时任务。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。

从定义上我们可以看到两个函数十分类似,只不过前者执行一次,而后者可以执行多次,两个函数的参数也相同,第一个参数是要执行的code或句柄,第二个是延迟的毫秒数。

很简单的定义,使用起来也很简单,但有时候我们的代码并不是按照我们的想象精确时间被调用的,很让人困惑

使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能。执行时机是不能保证的,因为在页面的生命周期中,不同时间可能有其他代码在控制 JavaScript 进程。在页面下载完后的代码运行、事件处理程序、Ajax 回调函数都必须使用同样的线程来执行。实际上,浏览器负责进行排序,指派某段代码在某个时间点运行的优先级。有关于js的单线程请点击:浏览器的多进程可以把 JavaScript 想象成在时间线上运行的。当页面载入时,首先执行是任何包含在script元素中的代码,通常是页面生命周期后面要用到的一些简单的函数和变量的声明,不过有时候也包含一些初始数据的处理。在这之后,JavaScript 主线程将等待更多代码执行。例如,当点击某个按钮时,onclick 事件处理程序会立刻执行,只要 JavaScript 主线程处于空闲状态。这样一个页面的时间线类似如图除了JavaScript 主线程外,还有一个需要在进程下一次空闲时执行的代码队列。随着页面在其生命周期中的推移,代码会按照执行顺序添加入队列。例如,当某个按钮被按下时,它的事件处理程序代码就会被添加到队列中,并在下一个可能的时间里执行。当接收到某个Ajax 响应时,回调函数的代码会被添加到队列。在JavaScript 中没有任何代码是立刻执行的,但一旦主线程空闲则尽快执行。定时器对队列的工作方式是,当特定时间过去后将代码插入。注意,给队列添加代码并不意味着对它立刻执行,而只能表示它会尽快执行。设定一个150ms 后执行的定时器不代表到了150ms 代码就立刻执行,它表示代码会在150ms 后被加入到队列中。如果在这个时间点上,队列中没有其他东西,那么这段代码就会被执行,表面上看上去好像代码就在精确指定的时间点上执行了。其他情况下,代码可能明显地等待更长时间才执行。请看以下代码:

简单示例

看个简单的例子,简单页面在加载完两秒后,写下Delayed alert!

setTimeout('document.write("Delayed alert!");', 2000);

看起来很合理,我们再看个setInterVal()方法的例子

图片 2

var num = 0;
        var i = setInterval(function() {
            num++;
            var date = new Date();
            document.write(date.getMinutes() + ':' + date.getSeconds() + ':' + date.getMilliseconds() + '<br>');
            if (num > 10)
                clearInterval(i);
        }, 1000);

图片 3

页面每隔1秒记录一次当前时间(分钟:秒:毫秒),记录十次后清除,不再记录。考虑到代码执行时间可能记录的不是执行时间,但时间间隔应该是一样的,看看结果

图片 4

43:38:116
43:39:130
43:40:144
43:41:158
43:42:172
43:43:186
43:44:200
43:45:214
43:46:228
43:47:242
43:48:256

图片 5

 

var btn = document.getElementById("my-btn");btn.onclick = function(){setTimeout(function(){ document.getElementById("message").style.visibility = "visible";}, 250);//其他代码};

为什么

时间间隔几乎是1000毫秒,但不精确,这是为什么呢?原因在于我们对JavaScript定时器存在一个误解,JavaScript其实是运行在单线程的环境中的,这就意味着定时器仅仅是计划代码在未来的某个时间执行,而具体执行时机是不能保证的,因为页面的生命周期中,不同时间可能有其他代码在控制JavaScript进程。在页面下载完成后代码的运行、事件处理程序、Ajax回调函数都是使用同样的线程,实际上浏览器负责进行排序,指派某段程序在某个时间点运行的优先级

我们把效果放大一下看看,添加一个耗时的任务

图片 6

function test() {
            for (var i = 0; i < 500000; i++) {
                var div = document.createElement('div');
                div.setAttribute('id', 'testDiv');
                document.body.appendChild(div);
                document.body.removeChild(div);
            }
        }
        setInterval(test, 10);
        var num = 0;
        var i = setInterval(function() {
            num++;
            var date = new Date();
            document.write(date.getMinutes() + ':' + date.getSeconds() + ':' + date.getMilliseconds() + '<br>');
            if (num > 10)
                clearInterval(i);
        }, 1000);

图片 7

我们又加入了一个定时任务,看看结果

图片 8

47:9:222
47:12:482
47:16:8
47:19:143
47:22:631
47:25:888
47:28:712
47:32:381
47:34:146
47:35:565
47:37:406

图片 9

这下效果明显了,差距甚至都超过了3秒,而且差距很不一致。

我们可以可以把JavaScript想象成在时间线上运行。当页面载入的时候首先执行的是页面生命周期后面要用的方法和变量声明和数据处理,在这之后JavaScript进程将等待更多代码执行。当进程空闲的时候,下一段代码会被触发

除了主JavaScript进程外,还需要一个在进程下一次空闲时执行的代码队列。随着页面生命周期推移,代码会按照执行顺序添加入队列,例如当按钮被按下的时候他的事件处理程序会被添加到队列中,并在下一个可能时间内执行。在接到某个Ajax响应时,回调函数的代码会被添加到队列。JavaScript中没有任何代码是立即执行的,但一旦进程空闲则尽快执行。定时器对队列的工作方式是当特定时间过去后将代码插入,这并不意味着它会马上执行,只能表示它尽快执行。

知道了这些后,我们就能明白,如果想要精确的时间控制,是不能依赖于JavaScript的setTimeout函数的。

在这里给一个按钮设置了一个事件处理程序。事件处理程序设置了一个250ms 后调用的定时器。点击该按钮后,首先将onclick 事件处理程序加入队列。该程序执行后才设置定时器,再有250ms后,指定的代码才被添加到队列中等待执行。实际上,对setTimeout()的调用表示要晚点执行某些代码。关于定时器要记住的最重要的事情是,指定的时间间隔表示何时将定时器的代码添加到队列,而不是何时实际执行代码。如果前面例子中的onclick 事件处理程序执行了300ms,那么定时器的代码至少要在定时器设置之后的300ms 后才会被执行。队列中所有的代码都要等到JavaScript 进程空闲之后才能执行,而不管它们是如何添加到队列中的。如图重复的定时器使用setInterval()创建的定时器确保了定时器代码规则地插入队列中。这个方式的问题在于,定时器代码可能在代码再次被添加到队列之前还没有完成执行,结果导致定时器代码连续运行好几次,而之间没有任何停顿。幸好,JavaScript 引擎够聪明,能避免这个问题。当使用setInterval()时,仅当没有该定时器的任何其他代码实例时,才将定时器代码添加到队列中。这确保了定时器代码加入到队列中的最小时间间隔为指定间隔。这种重复定时器的规则有两个问题:(1) 某些间隔会被跳过;(2) 多个定时器的代码执行之间的间隔可能会比预期的小。假设,某个onclick 事件处理程序使用setInterval()设置了一个200ms间隔的重复定时器。如果事件处理程序花了300ms 多一点的时间完成,同时定时器代码也花了差不多的时间,就会同时出现跳过间隔且连续运行定时器代码的情况。这个例子中的第 1 个定时器是在 205ms 处添加到队列中的,但是直到过了 300ms 处才能够执行。当执行这个定时器代码时,在 405ms 处又给队列添加了另外一个副本。在下一个间隔,即 605ms 处,第一个定时器代码仍在运行,同时在队列中已经有了一个定时器代码的实例。结果是,在这个时间点上的定时器代码不会被添加到队列中。结果在 5ms 处添加的定时器代码结束之后,405ms 处添加的定时器代码就立刻执行。为了避免 setInterval()的重复定时器的这 2 个缺点,你可以用如下模式使用链式 setTimeout() 调用。

重复的定时器

使用 setInterval() 创建的定时器可以使代码循环执行,到有指定效果的时候,清除interval就可以,如下例

图片 10

var my_interval = setInterval(function () {
            if (condition) {
                //..........
            } else {
                clearInterval(my_interval);
            }
        }, 100);

图片 11

但这个方式的问题在于定时器的代码可能在代码再次被添加到队列之前还没有执行完成,结果导致循环内的判断条件不准确,代码多执行几次,之间没有停顿。不过JavaScript已经解决这个问题,当使用setInterval()时,仅当没有该定时器的其他代码实例时才将定时器代码插入队列。这样确保了定时器代码加入到队列的最小时间间隔为指定间隔。

这样的规则带来两个问题

    1. 某些间隔会被跳过
  1. 2.多个定时器的代码执行之间的间隔可能比预期要小

为了避免这两个缺点,我们可以使用setTimeout()来实现重复的定时器

setTimeout(function () {
            //code
            setTimeout(arguments.callee, interval);
        }, interval)

这样每次函数执行的时候都会创建一个新的定时器,第二个setTimeout()调用使用了agrument.callee 来获取当前实行函数的引用,并设置另外一个新定时器。这样做可以保证在代码执行完成前不会有新的定时器插入,并且下一次定时器代码执行之前至少要间隔指定时间,避免连续运行。

图片 12

setTimeout(function () {
            var div = document.getElementById('moveDiv');
            var left = parseInt(div.style.left) + 5;
            div.style.left = left + 'px';
            if (left < 200) {
                setTimeout(arguments.callee, 50);
            }
        }, 50);

图片 13

这段定时器代码每次执行的时候,把一个div向右移动5px,当坐标大于200的时候停止。

 

文转:

setTimeout(function(){//处理中setTimeout(arguments.callee, interval);}, interval);

这个模式链式调用了 setTimeout(),每次函数执行的时候都会创建一个新的定时器。第二个setTimeout()调用使用了 arguments.callee 来获取对当前执行的函数的引用,并为其设置另外一个定时器。这样做的好处是,在前一个定时器代码执行完之前,不会向队列插入新的定时器代码,确保不会有任何缺失的间隔。而且,它可以保证在下一次定时器代码执行之前,至少要等待指定的间隔,避免了连续的运行。这个模式主要用于重复定时器,如下例所示。

setTimeout(function(){ var div = document.getElementById("myDiv"); left = parseInt(div.style.left) + 5; div.style.left = left + "px"; if (left  200){ setTimeout(arguments.callee, 50); }}, 50);

这段定时器代码每次执行的时候将一个div元素向右移动,当左坐标在 200 像素的时候停止。JavaScript 动画中使用这个模式很常见。

本文转载自:javascript高级程序设计(第3版)

本文由威尼斯www.9778.com发布于Web前端技术,转载请注明出处:setTimeout()和setInterval() 何时被调用执行(非多线程).RP

关键词:

通过Iterator控制Promise.all的并发数威尼斯www.9778.com

背景 1、万恶的回调 对前端工程师来说,异步回调是再熟悉不过了,浏览器中的各种交互逻辑都是通过事件回调实现...

详细>>

JavaScript 函数表达式(一)递归

定义: 递归函数是在一个函数通过名字调用自身的情况下构成的。 1、什么是递归函数? 递归函数就是在函数体内调...

详细>>

如果他们在未来的几年内技术水平没有突破性的提升,或者缺乏

友情提示:本人经历有限,没进过大厂,没参与过开源社区维护,就是个写了几年业务代码的底层码农。一切观点来...

详细>>

CFA协会如何解读区块链——下篇

事实:尽管许多行业可以将数据传输和存储到安全的区块链中,并从中受益,并提高许多企业的运营效率,并实现问...

详细>>