浅谈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 相关文章推荐
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
实例教学如何写vue插件
Nov 30 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
three.js如何实现3D动态文字效果
Mar 03 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用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
JS对日期操作封装代码实例
2019/11/08 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
Django如何实现上传图片功能
2019/08/16 Python
python如何保证输入键入数字的方法
2019/08/23 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
高校毕业生登记表自我鉴定
2013/11/03 职场文书
大四学年自我鉴定
2013/11/13 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
领导欢送会主持词
2015/07/06 职场文书
聊聊redis-dump工具安装问题
2022/01/18 Redis