链式调用setTimeout()与setInterval()的区别

使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能。执行时机是不能保证的,因为在页面的生命周期中,不同时间可能有其他代码在控制 JavaScript 进程。在页面下载完后的代码运行、事件处理程序、Ajax 回调函数都必须使用同样的线程来执行。实际上,浏览器负责进行排序,指派某段代码在某个时间点运行的优先级。有关于js的单线程请点击:浏览器的多进程

可以把 JavaScript 想象成在时间线上运行的。当页面载入时,首先执行是任何包含在<script>元素中的代码,通常是页面生命周期后面要用到的一些简单的函数和变量的声明,不过有时候也包含一些初始数据的处理。在这之后,JJavaScript 主线程将等待更多代码执行。例如,当点击某个按钮时,onclick 事件处理程序会立刻执行,只要 JavaScript 主线程处于空闲状态。这样一个页面的时间线类似如图

除了JavaScript 主线程外,还有一个需要在进程下一次空闲时执行的代码队列。随着页面在其生命周期中的推移,代码会按照执行顺序添加入队列。例如,当某个按钮被按下时,它的事件处理程序代码就会被添加到队列中,并在下一个可能的时间里执行。当接收到某个 Ajax 响应时,回调函数的代码会被添加到队列。在 JavaScript 中没有任何代码是立刻执行的,但一旦主线程空闲则尽快执行。

 

定时器对队列的工作方式是,当特定时间过去后将代码插入。注意,给队列添加代码并不意味着对它立刻执行,而只能表示它会尽快执行。设定一个 150ms 后执行的定时器不代表到了 150ms 代码就立刻执行,它表示代码会在 150ms 后被加入到队列中。如果在这个时间点上,队列中没有其他东西,那么这段代码就会被执行,表面上看上去好像代码就在精确指定的时间点上执行了。其他情况下,代码可能明显地等待更长时间才执行。

请看以下代码:

var btn = document.getElementById("my-btn");

btn.onclick = function(){

setTimeout(function(){

document.getElementById("message").style.visibility = "visible";

}, 250);

//其他代码

};

在这里给一个按钮设置了一个事件处理程序。事件处理程序设置了一个 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() 调用。

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 动画中使用这个模式很常见。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247420.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Multiple Dispatch

今天在看文章的时候遇到了multiple dispatch这个术语。看看了wiki&#xff0c;写得云里雾里。最后搜了搜资料&#xff0c;基本上搞清楚了。 multiple dispatch的混淆之处在于其和object system结合在一起。当然wiki上写得很清楚&#xff1a;“a function or method can be dyna…

如何让Element UI的Message消息提示每次只弹出一个

Element UI的Message消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示&#xff0c;但是公司的测试人员在进行测试时会一直点&#xff0c;然后就会出现如下图的情况。虽然客户使用的时候一般来说不会出现这种情况&#xff08;毕竟客户不会闲着没事一直点点点&…

jsp头文件的内容/response.setHeader

转载的&#xff01;&#xff01;&#xff01;做一个记录!!!! response.setHeader 是用来设置返回页面的头 meta 信息, 使用时 response.setHeader( name, contect ); meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中 1、&l…

css3实现科技感的呼吸灯效果

呼吸灯效果是一种常见的灯光效果&#xff0c;比如网页的按钮&#xff0c;现实生活中比如电脑的开机按钮。 使用CSS3的animation方法可以实现很多迷人的网页动画特效。 使用CSS3 配合box-shadow即可实现类似的效果 样式代码如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18…

WIX(20121031) 应用设置默认变量

花了了好长时间找到的 这样可以将变量信息定义到wxs中&#xff0c;方便应用 <?xml version"1.0" encoding"UTF-8"?> <?define ProductName"Wix CY"?> <Wix xmlns"http://schemas.microsoft.com/wix/2006/wi">&l…

百度Echarts折线图tooltip里数据添加单位

option {title: {text: 折线图堆叠},tooltip: {trigger: axis,//在这里设置formatter: {a0}:{c0}万},legend: {data:[邮件营销,联盟广告,视频广告,直接访问,搜索引擎]},grid: {left: 3%,right: 4%,bottom: 3%,containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxi…

VUE组件 之 Drawer 抽屉

一、源码地址 https://github.com/imxiaoer/DrawerForVue 二、效果图 三、具体代码 drawer.vue <template><div class"drawer"><div :class"maskClass" click"closeByMask"></div><div :class"mainClass"…

什么是基金净值、单位净值、累计净值

基金知识-单位净值和累计净值 一投资者问&#xff1a;单位净值和累计净值分别指什么&#xff1f;如何通过这两个值来评定一个基金&#xff1f; 景顺长城基金管理有限公司答&#xff1a;基金资产净值是在某一时点上&#xff0c;基金资产的总市值扣除负债后的余额&#xff0c;代表…

Java生鲜电商平台-用户管理的架构与实战

Java生鲜电商平台-用户管理的架构与实战 在电商后台中&#xff0c;用户管理是运营人员管理用户的模块。这里的用户区别于运营人员&#xff0c;会在权限的角色管理中分别阐述。这里的用户包含平台的一般用户&#xff0c;会员用户等。本文将分享一下用户管理模块的设计心得。在设…

vue+Element-ui实现分页效果

当我们向后台请求大量数据的时候&#xff0c;并要在页面展示出来&#xff0c;请求的数据可能上百条数据或者更多的时候&#xff0c;并不想在一个页面展示&#xff0c;这就需要使用分页功能来去完成了。 1.本次所使用的是vue2.0element-ui实现一个分页功能&#xff0c;element-…

ListViewAutoScrollHelper

ListViewAutoScrollHelper转载于:https://www.cnblogs.com/ZacharyHodgeZou/p/4208350.html

wx.navigateTo跳转首页无效

问题: 首页A—B,B—C,C—A(回首页无效) 先来看首页,首页是由tabBar中三个页面组成 再来看下首页的代码组成 //只保留核心代码 "tabBar": { ... "list": [ { "pagePath": "pages/home/home", "te…

21款网页版html5小游戏源码

html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js html5 2048数字游戏源码_2048网页版源码下载 html5盲打高手打飞字游戏下载_网页版英文打飞字游戏源…

Cookie的使用(js-cookie插件)

一、安装 npm install js-cookie --save二、引用 import Cookies from js-cookie三、一般使用 存到Cookie去 // Create a cookie, valid across the entire site: Cookies.set(name, value);// Create a cookie that expires 7 days from now, valid across the entire site…

js的array.some()方法

定义和用法 some() 方法用于检测数组中的元素是否满足指定条件&#xff08;函数提供&#xff09;。 some() 方法会依次执行数组的每个元素&#xff1a; 如果有一个元素满足条件&#xff0c;则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素&#xff0c…

AOP集成防止连续多次点击问题

AOP即Aspect Oriented Programming的缩写,习惯称为切面编程;与OOP(面向对象编程)万物模块化的思想不同,AOP则是将涉及到众多模块的某一类问题进行统一管理,AOP的优点是将业务逻辑与系统化功能高度解耦,让我们在开发过程中可以只专注于业务逻辑,其他一些系统化功能(如路由、日志…

应用内安装部分手机出现解析错误

在做应用内升级安装apk 的时候 出现了 程序包解析出错&#xff0c;这就很难受了 明明程序包有问题&#xff0c;而且还并不是必发&#xff0c;查了下资料发现是7.0版本的问题 有好几种说法会引起这个问题 1 使用了V2包 我们在打包的时候最好不要用V2签名 2 加入临时授权 intent.…

自定义input[type=file]的兼容样式

input[type"file"]的样式在各个浏览器中的表现不尽相同&#xff1a; 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外&#xff0c;当我们规定 input[type"file"] 的高度&#xff0c;并把它的行高设置成与其高度相等后&#xff0c;chrome中难看的样…

Excel催化剂开源第37波-音视频文件元数据提取(分辨率,时长,采样率等)

上一篇提到图片元信息Exif的提取&#xff0c;当然还有一类音视频文件&#xff0c;也同样存储着许多宝贵的元数据&#xff0c;那就开源到底呗&#xff0c;虽然自己找寻过程也是蛮艰辛坎坷的&#xff0c;大家看后有收获&#xff0c;只求多多传播下&#xff0c;让前人的工作可以更…