浅谈JavaScript超时调用和间歇调用


Posted in Javascript onAugust 30, 2015

间歇调用

在JavaScript中间歇调用很常见,setInterval,就是间隔一定的时间重复调用。

setInterval()方法接收两个参数:第一个参数可以是字符串,也可以是函数,第二个参数是一个以毫秒为单位的数字,表示重复间隔的时长。

参数是字符串

当第一个传递参数是字符串时,如下:

setInterval("alert('this is a string.')",1000);

这里的字符串是一段JavaScript代码,和传入的eval()函数的参数一样,如果是有内外两个引号的话,记得引号不要相同就行了。

setInterval()会返回一个数值型的ID,这个ID是计划执行代码的唯一标识符,所以可以用它来取消重复操作。setInterval()对应的一个取消该操作的方法:clearInterval(),当然要取消重复操作的话,clearInterval()必须放在还没有执行完毕的时候。

比如:

var intervalId=setInterval(...);
clearInterval(intervalId);

首先我们获取ID,然后将ID传入clearInterval()中即可,因为取消操作紧跟在setInterval()后面,所以可以立即取消,就和没发生一样。

参数是函数

因为当传递的参数是字符串的时候,可能会导致性能损失,所以一般情况下,用的最多的还是给它传递一个函数。

如下:

var num=0;
function increNum(){
 num++;
 if(num>=10){
  clearInterval(intervalId);
  alert('over');
 }
}
intervalId=setInterval(increNum,500);

该段程序设置了一个increNum函数,并作为参数传递给setInterval(),同时当重复运行到10次的时候,取消运行操作,弹出警告框。

超时调用

超时调用和间歇调用类似,setTimeout(),它也接收两个参数,第一个可以是包含JavaScript代码的字符串,也可是一个函数,第二个参数是延时时间和setInterval()方法的参数是一样。

但是这里要说明一点:

延时时间并不是说经过设定的延时后程序一定会执行。

为什么呢?

因为JavaScript是单线程解释器,所以在一定的时间内只能执行一段代码,不能同时执行多段代码,所以在JavaScript中有一个任务队列,将要执行的任务按照先后顺序排在队列中,设定的延时时间是经过这段时间将当前任务加入到任务队列中。如果当前没有任务执行,那么加入到任务队列中的代码立刻执行,如果当前还有正在执行的代码段,那么只有当该代码段执行完毕后再执行新加入的任务。

同样,setTimeout()也有一个返回ID,也可以通过这个数值ID来取消超时调用,对应的取消方法是clearTimeout()。

在这里,我们用超时调用方法来把间歇调用中的那段重复执行的代码复写一遍:

var num=0;
function increNum(){
 num++;
 if(num<=10){
  setTimeout(increNum,500);
 }else{
  alert('over');
 }
}
setTimeout(increNum,500);

这段程序也可以完成重复操作并在10次之后终止操作,和上述的setInterval()有区别的是它并没有用返回的数值ID。

因为setInterval()是重复执行,所以一直会有数值ID返回,所以必须得一直跟踪这个数值ID,而setTimeout()执行完毕后就不再执行,所以我们不用跟踪这个返回的数值ID,这就给我们带来了一定的便利。

而且,后一个间歇调用可能会在前一个间歇调用还没结束之前被调用,当函数的执行时间比间歇调用的时间长的时候这种情况就会发生,所以综上所述,用setTimeout()来模拟间歇调用是一种比较好的途径。

当然,在比较简单的程序中用setInterval()还是没有很大问题的(突然想起了一句话,存在即是合理的~~~~)。

Javascript 相关文章推荐
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
javascript常用功能汇总
Jul 05 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 #Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 #Javascript
javascript中sort() 方法使用详解
Aug 30 #Javascript
javascript中的正则表达式使用详解
Aug 30 #Javascript
jQuery鼠标事件汇总
Aug 30 #Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 #Javascript
jquery专业的导航菜单特效代码分享
Aug 29 #Javascript
You might like
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
php实现比较全的数据库操作类
2015/06/18 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
javascript的push使用指南
2014/12/05 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
package.json文件配置详解
2017/06/15 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
JS实现图片切换效果
2018/11/17 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
python中pyqtgraph知识点总结
2021/01/26 Python
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
2013届毕业生求职信范文
2013/11/20 职场文书
婚前保证书
2014/04/29 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
保险公司开门红口号
2014/06/21 职场文书
2014年护理部工作总结
2014/11/14 职场文书
消费者投诉书范文
2015/07/02 职场文书
三下乡活动心得体会
2016/01/23 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang