浅谈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 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
九种原生js动画效果
Nov 11 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 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
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
对Django中内置的User模型实例详解
2019/08/16 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
Python如何给函数库增加日志功能
2020/08/04 Python
Python调用C/C++的方法解析
2020/08/05 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
指导教师推荐意见
2015/06/05 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
八年级作文之友情
2019/11/25 职场文书