定时器 setTimeout()超时调用和 setInterval()间歇调用

JavaScript是单线程语言,但它允许通过设置定时器,也就是设置超时值和间歇时间来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码,而后者则是每隔指定的时间就执行一次代码。

超时调用需要使用window对象的setTimeout()方法,他接受两个参数:要执行的代码和以毫秒表示的时间。其中,第一个参数可以是一个包含JavaScript代码的字符串,也可以是一个函数。例如,下面对stTimeout()的两次调用都会在一秒钟后显示一个警告框:

//不建议传递字符串!

setTimeout("alert(‘Hello world!‘)", 1000);

//推荐的调用方式

setTimeout(function () {

alert("Hello world!");

}, 1000);

虽然这两种调用方式都没有问题,但由于传递字符串可能导致性能损失,因此不建议以字符串做为第一个参数。调用setTimeout()之后,该方法会返回一个数值ID,表示超时调用。这个超时调用ID是计划执行代码的唯一标识符,可以通过它来取消超时调用。要取消尚未执行的超时调用计划,可以调用clearTimeOut()方法并将相应的超时调用ID作为参数传递给它,如下所示:

//设置超时调用

var timeoutId = setTimeout(function () {

alert("Hello world!");

}, 1000);

//注意:把它取消

clearTimeout(timeoutId);

只要是在指定的时间尚未过去之前调用clearTimeout(),就可以完全取消超时调用。前面的代码在设置超时调用之后马上有调用了clearTimeout(),结果就跟什么也没发生一样。

间歇调用与超时调用类似,只不过它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval(),它接受的参数与setTimeout()相同:要执行的代码(字符串或者函数)和每次执行之前需要等待的毫秒数。下面来看一个例子:

//不建议传递字符串!

setInterval("alert(‘Hello world‘)", 10000);

//推荐的调用方式

setInterval(function () {

alert("Hello world!");

}, 1000);

调用setInterval()方法也会返回一个间歇调用ID,该ID可用于在将来在某个时刻取消间歇调用。要取消尚未执行的间歇调用,可以使用clerarInterval()方法并传入相应的间歇调用ID。取消间歇调用的重要性要远远高于取消超时调用,因为在不加干涉的情况下,间歇调用将会一直执行到页面卸载。下面是一个常见的使用间歇调用的例子:

var num = 0;

var max = 10;

var intervalId = null;

function incrementNumber() {

num++;

//如果执行次数达到了max设定的值,则取消后续尚未执行的调用

if (num == max) {

clearInterval(intervalId);

alert("完成");

}

}

intervalId = setInterval(incrementNumber, 500);

在这个例子中,变量num每半秒递增一次,当递增到最大值是就会取消先前设定的间歇调用。这个模式也可以使用超时调用来实现,如下所示:

var num = 0;

var max = 10;

function incrementNumber() {

num++;

//如果执行次数未达到max设定的值,则设置另一次超时调用

if (num < max) {

setTimeout(incrementNumber, 500);

} else {

alert("完成");

}

}

setTimeout(incrementNumber, 500);

可见,在使用超时调用时,没必要跟踪超时调用ID,因为每次执行代码之后,如果不再设置另一次超时调用,调用就会自行停止。一般认为,使用超时调用来模拟间歇调用的是一种最佳的模式。在开发环境下,很少使用真正的间歇调用,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。而像前面实例中那样使用超时调用,则完全可以避免这一点。所以最好不要使用间歇调用。

原文地址:https://www.cnblogs.com/ranyonsue/p/9295786.html

时间: 2024-08-29 22:09:00

定时器 setTimeout()超时调用和 setInterval()间歇调用的相关文章

JS中的间歇调用setInterval()与超时调用setTimeout()相关总结

超时调用需要使用window.setTimeout(code,millisec)方法 它接受两个参数:要执行的代码和以毫秒表示的时间(即在执行代码前需要等待多少毫秒).其中第一个参数可以是一个包含JS代码的字符串(就和在eval()函数中使用的字符串一样),也可以是一个函数.第二个参数表示等待多长时间的毫秒数,但经过该事件后指定的代码不一定会执行. 这是因为JS是一个单线程序的解释器,一定时间内只能执行一段代码,为了控制要执行的代码就有一个JS任务队列,这些任务会按照将他们添加到队列的顺序执行.

超时调用与间歇调用

1.首先要清楚,JavaScript是单线程语言,一段时间内只能执行一段代码.因此就有一个JavaScript的任务队列来控制代码的执行顺序.window对象的属性setTimeout()的第二个参数就是告诉JavaScript再过多长时间将当前任务添加到队列中.如果队列是空的,那么添加的代码会立即执行:如果队列不是空的,那么先等到前面的代码执行完后再执行.间歇调用setInterval()与超时调用相似,只不过是重复调用. setTimeout(function(){ alert("Hello

超时调用setTimeout 和 间歇调用setInterval

今天看了javascript高级程序设计(第三版)一书,发现说setTimeout比setInterval更好,觉得的确如此.平时都是用setInterval多点,现在还是转一下思路了.又学习到了.笔记如下: ------------------------------------------------------------------------------------------------------------------------------------------- setTi

关于JavaScript中的setTimeout()链式调用和setInterval()探索

http://www.cnblogs.com/Wenwang/archive/2012/01/06/2314283.html http://www.cnblogs.com/yangjunhua/archive/2012/04/12/2444106.html 下面的参考:http://evantre.iteye.com/blog/1718777 1.选题缘起 在知乎上瞎逛的时候看到一个自问自答的问题: 知乎上,前端开发领域有哪些值得推荐的问答?,然后在有哪些经典的 Web 前端或者 JavaScr

JavaScript超时调用、间歇调用

超时调用 //onclick设置按钮点击之后要执行的代码地址,fnFun就是要执行的代码函数 <input type="button" value="暂停" onclick="fnFun()"> <script> var fnFun2 = function (){ console.log('fnFun2'); } //参数一:超时后会被调用的函数地址 //参数二:等待时间 //返回值:定时器的ID,可以通过这个ID来终止这

JavaScript定时调用函数(SetInterval与setTimeout)

setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码. 不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码. 区别:window.setTimeout("function",time)://设置一个超时对象,只执行一次,无周期 window.setInter

web 开发之js---js 中的定时器setTimeout(function,time),setinterval(function,time)

####10秒自动跳转 Html代码   <div class="jf_register"> <h2>您好,欢迎光临<fmt:message key="b2cShowName"/>!<a class="blue" href="<%=path%>/LoginRegist_turnToLogin">请登录</a></h2> </div>

使用定时器settimeout、setInterval执行能传递参数的函数

无论是window.setTimeout还是window.setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,这就需要想方法解决.经网上查询后整理如下: 例如对于函数hello(_name),它用于针对用户名显示欢 迎信息: var userName="jack"; //根据用户名显示欢迎信息 function hello(_name){ alert("hello,"+_name); } 这时,如果企图使用以下语句来使hello

使用 setTimeout 来模拟一个 setInterval

setTimeout 超时调用:在多少时间 在执行: setinterval 每隔多少时间 就调用 例如: setTimeout这个的值是1000,也就是说在页面刷新后,1000毫秒之后才调用这个函数体内的东西 setTimeout有一个最低的时间限制,400s setinterval的值是1000的话,就是每过1000毫秒执行一次 1 为什么要模拟 ? 2 然后模拟是解决了什么 ? 3.setinterval 有两个缺点: 1.setInterval无视网络延迟,只要达到时间,就会进行下一次调