浅谈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 年会抽奖程序
Dec 22 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 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
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python根据京东商品url获取产品价格
2015/08/09 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
详解python3中zipfile模块用法
2018/06/18 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
简单了解python列表和元组的区别
2020/05/14 Python
python3.7添加dlib模块的方法
2020/07/01 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
医学专业五年以上个人求职信
2013/12/03 职场文书
个人实习生的自我评价
2014/02/16 职场文书
我爱我家教学反思
2014/05/01 职场文书
经典演讲稿开场白
2014/08/25 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
导游词之北京明十三陵
2019/10/28 职场文书