浅谈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 相关文章推荐
Ext 今日学习总结
Sep 19 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
Javascript模块化编程详解
Dec 01 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 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
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
Python用字典构建多级菜单功能
2019/07/11 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
Django中多种重定向方法使用详解
2019/07/17 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
航空大学应届生求职信
2013/11/10 职场文书
自我评价是什么
2014/01/04 职场文书
经销商会议欢迎词
2014/01/11 职场文书
初中音乐教学反思
2014/01/12 职场文书
晚归检讨书
2014/02/19 职场文书
上课看小说检讨书
2014/02/22 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
win10搭建配置ftp服务器的方法
2022/08/05 Servers