资讯专栏INFORMATION COLUMN

js计数器方法setInterval()、clearInterval()、setTimeout()和

keithxiaoy / 672人阅读

摘要:方法描述周期性地调用一个函数或者执行一段代码。方法可取消由方法设置的。语法详解是该延时操作的数字此随后可以用来作为方法的参数。需要注意的是,不支持第一种语法中向延迟函数传递额外参数的功能。该值标识要取消的延迟执行代码块。

方法 描述
setInterval 周期性地调用一个函数(function)或者执行一段代码。
clearInterval 取消掉用setInterval设置的重复执行动作。
setTimeout 在指定的延迟时间之后调用一个函数或者执行一个代码片段。
clearTimeout 方法可取消由 setTimeout() 方法设置的 timeout。
setInterval()

window.setInterval()方法,周期性地调用一个函数(function)或者执行一段代码。

语法
  

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
var intervalID = window.setInterval(code, delay);

详解
intervalID 是此重复操作的唯一辨识符,可以作为参数传给clearInterval()。  
func 是你想要重复调用的函数。  
code 是另一种语法的应用,是指你想要重复执行的一段字符串构成的代码(使用该语法是不推荐的,不推荐的原因和eval()一样)。  
delay 是每次延迟的毫秒数 (一秒等于1000毫秒),函数的每次调用会在该延迟之后发生。和setTimeout一样,实际的延迟时间可能会稍长一点。  

需要注意的是,IE不支持第一种语法中向延迟函数传递额外参数的功能.如果你想要在IE中达到同样的功能,你必须使用一种兼容代码 (查看callback arguments 一段)。

例子
jssetInterval(function(){
    console.log("log")
},1000)
clearInterval()

window.clearInterval() 取消掉用setInterval设置的重复执行动作.

语法
  

window.clearInterval(intervalID)

详解
在指定的延迟时间之后调用一个函数或者执行一个代码片段。  
intervalID是你想要取消的重复动作的ID,这个ID是个整数,是由setInterval()返回的。 
例子
jsvar pageTimer = {} ; //定义计算器全局变量
//赋值模拟
pageTimer["timer1"] = setInterval(function(){},2000);
pageTimer["timer2"] = setInterval(function(){},2000);
//全部清除方法
for(var each in pageTimer){
    clearInterval(pageTimer[each]);
}
js// 暴力清除
for(var i = 1; i < 1000; i++) {
    clearInterval(i);
}

分析:实际上暴力清除的方式是不可取的,在不得已情况下才使用,在IE下,定时器返回值在IE下面是8位数字如:248147094,并且起始值不能确定,而Chrome和firefox下是从1开始的个位数字,一般项目还是建议第一种,并且第一种的扩展性也好,比如可以做个方法,清除除了指定定时器之外的所有定时器。

setTimeout()

在指定的延迟时间之后调用一个函数或者执行一个代码片段。
window.setTimeout()

语法
  

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
var timeoutID = window.setTimeout(code, delay);

详解
* timeoutID 是该延时操作的数字ID, 此ID随后可以用来作为window.clearTimeout方法的参数。
* func 是你想要在delay毫秒之后执行的函数。
* code 在第二种语法,是指你想要在delay毫秒之后执行的代码 (使用该语法是不推荐的, 不推荐的原因和eval()一样)。 
* delay 是延迟的毫秒数 (一秒等于1000毫秒),函数的调用会在该延迟之后发生.但是实际的延迟时间可能会稍长一点,查看下面的备注。

需要注意的是,IE不支持第一种语法中向延迟函数传递额外参数的功能。如果你想要在IE中达到同样的功能,你必须使用一种兼容代码 (查看callback arguments 一段)。

备注

你可以使用 window.clearTimeout()来取消延迟操作。
如果你希望你的代码被重复的调用 (比如每 N 毫秒一次),考虑使用window.setInterval()。

例子
js// 推荐
window.setTimeout(function() {
    alert("Hello World!");
}, 500);

// 不推荐
window.setTimeout("alert("Hello World!");", 500);

clearTimeout()

window.clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

语法
  

clearTimeout(id_of_settimeout)

详解
参数 描述
id_of_settimeout 由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
实例
jsvar c=0
var t
function timedCount(){
    document.getElementById("txt").value=c
    c=c+1
    t=setTimeout("timedCount()",1000)
}
function stopCount(){
    clearTimeout(t)
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85484.html

相关文章

  • js 定时器笔记

    摘要:本文是学习定时器单线程同步异步任务的笔记,只适合初学者。第一个参数是函数名或者语句,第二个参数延迟的时间参数,单位为它返回定时器的编号,以后可以用来取消这个定时器。将该整数传入和函数,就可以取消对应的定时器。 本文是学习js定时器、单线程、同步异步任务的笔记,只适合初学者。 一、定时器(timer) JavaScript提供定时执行代码的功能,该功能主要由setTimeout()和se...

    BoYang 评论0 收藏0
  • 简单说 JavaScript实现雪花飘落效果

    摘要:说明这次实现的雪花飘落的效果很简单,主要是为了练习练习中的定时器,和。简单说,意思就是用了这个定时器,能把两次修改样式的代码分开执行,可以先把第一次修改的样式渲染后,在进行第二次的修改,雪花就会动了。 说明 这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval。 效果图 showImg(https://seg...

    yedf 评论0 收藏0
  • 简单说 JavaScript实现雪花飘落效果

    摘要:说明这次实现的雪花飘落的效果很简单,主要是为了练习练习中的定时器,和。简单说,意思就是用了这个定时器,能把两次修改样式的代码分开执行,可以先把第一次修改的样式渲染后,在进行第二次的修改,雪花就会动了。 说明 这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval。 效果图 showImg(https://seg...

    ShowerSun 评论0 收藏0
  • Javascript学习总结 - JS基础系列三

    摘要:案例每隔毫秒调用函数并显示时间。当点击按钮时,停止时间代码如下计时器每隔毫秒调用函数,并将返回值赋值给计时器计时器,在载入后延迟指定时间后去执行一次表达式仅执行一次。该值标识要取消的延迟执行代码块。 简述 本系列将持续更新Javascript基础部分的知识,谁都想掌握高端大气的技术,但是我觉得没有一个扎实的基础,我认为一切高阶技术对我来讲都是过眼云烟,要成为一名及格的前端工程师,必须把...

    zlyBear 评论0 收藏0
  • 定时器

    摘要:提供定时执行代码的功能,叫做定时器,主要由和这两个函数来完成。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。上面代码中,回调函数不会再执行了,因为两个定时器都被取消了。 JavaScript 提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。 setTimeout()...

    Nino 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<