浅谈JavaScript超时调用和间歇调用

间歇调用

在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()还是没有很大问题的（突然想起了一句话，存在即是合理的~~~~）。

赞 (0)

相关推荐

  • js超时调用setTimeout和间歇调用setInterval实例分析

    本文实例分析了js超时调用setTimeout和间歇调用setInterval的用法.分享给大家供大家参考.具体如下: 今天看了javascript高级程序设计(第三版)一书,发现说setTimeout比setInterval更好,觉得的确如此.平时都是用setInterval多点,现在还是转一下思路了.又学习到了.分析如下: setTimeout包含两个参数,第一个参数是要执行的代码,第二个参数是时间. 第一个参数可以是字符串也可以是函数,但是推荐使用函数而不是字符串. 使用字符串相当于eva

  • javascript学习笔记(十五) js间歇调用和超时调用

    1.超时调用setTimeout() setTimeout() 方法接受两个参数,第一个参数是函数,第二个参数是时间(单位微秒),返回数值ID 复制代码 代码如下: setTimeout( function () { alert("你好!"); },1000); 调用前取消clearTimeout(),接受一个参数超时调用ID 复制代码 代码如下: var timeOutId = setTimeout( function () { alert("你好!"); },1

  • 浅谈JavaScript超时调用和间歇调用

    间歇调用 在JavaScript中间歇调用很常见,setInterval,就是间隔一定的时间重复调用. setInterval()方法接收两个参数:第一个参数可以是字符串,也可以是函数,第二个参数是一个以毫秒为单位的数字,表示重复间隔的时长. 参数是字符串 当第一个传递参数是字符串时,如下: setInterval("alert('this is a string.')",1000); 这里的字符串是一段JavaScript代码,和传入的eval()函数的参数一样,如果是有内外两个引号

  • 浅谈React多个setState会调用几次

    浅谈React多个setState会调用几次

    目录 1. 两个setState,调用几次? 2. 两个setState,调用的是哪一个? 3. 两个setState放在setTimeout中? 4. 总结 1. 两个setState,调用几次? 如下代码所示,state中有一个count.对按钮绑定了点击事件,事件中执行了两次setState,每次都将count的值加1. 当点击按钮时,setState会执行几次?render()会执行几次? 答案:都是1次. state = { count: 0 }; handleClick = () =

  • 浅谈如何在bat文件中调用另一个bat文件

    目录 情景一:两个bat文件在同一个目录下 情景二:两个bat文件不在同一个目录下 情景三:开启一个新的cmd窗口来运行另一个bat文件 情景一:两个bat文件在同一个目录下 有时候我们需要在一个bat文件中调用另一个bat文件,比如我们想在a.bat中调用b.bat,如下. a.bat @echo off echo I am a.bat- echo now run the b.bat call b.bat echo over b.bat @echo off echo I am b.bat- 在

  • 浅谈JavaScript编程语言的编码规范

    JavaScript 编程语言作为最流行的客户端脚本语言,早已被众多 Web 开发人员所熟悉.随着 Web2.0 时代的到来和 Ajax 技术的广泛应用,JavaScript 也逐渐吸引着更多的视线.工作中要求越多的是对 JavaScript 语言的深入学习,灵活运用,和对编码质量的保证. 对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编码规范也

  • 浅谈JavaScript 浏览器对象

    浅谈JavaScript 浏览器对象

    window window对象不但充当全局作用域,而且表示浏览器窗口. window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度.内部宽高是指除去菜单栏.工具栏.边框等占位元素后,用于显示网页的净宽高.还有一个outerWidth和outerHeight属性,可以获取浏览器窗口的整个宽高. 补充: 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:

  • 浅谈javascript运算符——条件,逗号,赋值,()和void运算符

    前面的话 javascript中运算符总共有46个,除了前面已经介绍过的算术运算符.关系运算符.位运算符.逻辑运算符之外,还有很多运算符.本文将介绍条件运算符.逗号运算符.赋值运算符.()和void运算符 条件运算符 条件运算符是javascript中唯一的一个三元运算符(三个操作数),有时直接称做'三元运算符'.通常这个运算符写成'?:',当然在代码中往往不会这么简写,因为这个运算符拥有三个操作数,第一个操作数在'?'之前,第二个操作数在'?'和':'之间,第三个操作数在':'之后 varia

  • 浅谈javascript中的Function和Arguments

    javascript的Function 属性: 1.Arguments对象 2.caller 对调用单前函数的Function的引用,如果是顶层代码调用,  则返回null(firefox返回undefined).  注:只有在代码执行时才有意义 3.length 声明函数是指定的命名参数的个数(函数定义是,定义参数的个数) 4.prototype 一个对象,用于构造函数,这个对象定义的属性和方法  由构造函数创建的所有对象共享. 方法: applay() --> applay(this,[])

  • 浅谈javascript基础之客户端事件驱动

    浅谈javascript基础之客户端事件驱动

    我们知道,面向对象发展起来后,"一夜之间",几乎所有的语言都能基于对象了,JavaScript也是基于对象的语言.用户在浏览器上的行为称作"事件",之后引发的一系列动作,比如弹窗啦,改变浏览器大小啦,验证啦,balabala,都叫做"事件驱动".当然,这次我主要介绍几个常常发生的事件. ps:对于js脚本的支持以浏览器而定!!!有的低版本的浏览器可能不支持!!! 1.单击事件(onClick) 啥叫单击事件呢?当用户单击鼠标按钮是,就会产生单击事

  • 浅谈javascript中new操作符的原理

    浅谈javascript中new操作符的原理

    javascript中的new是一个语法糖,对于学过c++,java 和c#等面向对象语言的人来说,以为js里面是有类和对象的区别的,实现上js并没有类,一切皆对象,比java还来的彻底 new的过程实际上是创建一个新对象,把新象的原型设置为构造器函数的原型,在使用new的过程中,一共有3个对象参与了协作,构造器函数是第一个对象,原型对象是二个,新生成了一个空对象是第三个对象,最终返回的是一个空对象,但这个空对象不是真空的,而是已经含有原型的引用(__proto__) 步骤如下: (1) 创建一

  • 浅谈Javascript中的函数、this以及原型

    关于函数 在Javascript中函数实际上就是一个对象,具有引用类型的特征,所以你可以将函数直接传递给变量,这个变量将表示指向函数"对象"的指针,例如: function test(message){ alert(message); } var f = test; f('hello world'); 你也可以直接将函数申明赋值给变量: var f = function(message){ alert(message); }; f('hello world'); 在这种情况下,函数申明

随机推荐