浅谈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 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
jQuery实现简单的tab标签页效果
Sep 12 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
原生小程序封装跑马灯效果
Oct 21 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
Protoss热键控制
2020/03/14 星际争霸
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
Python的装饰器用法学习笔记
2016/06/24 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
python实现微信防撤回神器
2019/04/29 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
python创建子类的方法分析
2019/11/28 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
党员党性分析材料
2014/02/17 职场文书
企业环保标语
2014/06/10 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
五好家庭事迹材料
2014/12/20 职场文书
专家推荐信范文
2015/03/26 职场文书
公司承诺书格式范文
2015/04/28 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
工作表现证明
2015/06/15 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫