浅谈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改变单元格背景颜色及Column render学习
Feb 06 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
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抓取页面与代码解析 推荐
2010/07/23 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
php实现的RSS生成类实例
2015/04/23 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
vue实现拖拽效果
2019/12/23 Javascript
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
利用python修改json文件的value方法
2018/12/31 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
AJax面试题
2014/11/25 面试题
创伤外科专业推荐信范文
2013/11/19 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
文艺演出主持词
2015/07/01 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis