浅谈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 相关文章推荐
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
Express 配置HTML页面访问的实现
Nov 01 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 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
第七节--类的静态成员
2006/11/16 PHP
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
学习ExtJS Column布局
2009/10/08 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
Python实现全角半角字符互转的方法
2016/11/28 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
小学教研工作制度
2014/01/15 职场文书
企业委托书范本
2014/09/13 职场文书
会计工作岗位职责
2015/02/03 职场文书
运输公司工作总结
2015/08/11 职场文书
社区服务活动感想
2015/08/11 职场文书
《刷子李》教学反思
2016/02/20 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
使用Apache Camel表达REST服务的方法
2022/06/10 Servers