浅谈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 相关文章推荐
JavaScript While 循环基础教程
Apr 05 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 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/04/09 魔兽争霸
一个用php实现的获取URL信息的类
2007/01/02 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
php计算整个目录大小的方法
2015/06/19 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
Python抽象类的新写法
2015/06/18 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Django REST framwork的权限验证实例
2020/04/02 Python
python中id函数运行方式
2020/07/03 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
西班牙手机之家:Phone House
2018/10/18 全球购物
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
Hotels.com印度:酒店预订
2019/05/11 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
简易版租房协议书范本
2014/10/13 职场文书
2014年评职称工作总结
2014/11/20 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
对公司的意见和建议
2015/06/04 职场文书