JavaScript中的一次性定时器和周期性定时器

举报
青年码农 发表于 2022/08/25 00:16:20 2022/08/25
【摘要】 JavaScript中定时器有两种,一种是一次性定时器(setTimeout),另外一种是周期性定时器(setInterval),两种都可以延迟一段时间后再执行某个操作。不同的, setTimeout只执行一次,setInterval则一直执行,直到清除定时器为止。 实际项目中,这两种定时器都会用到,首先来说说setT...

JavaScript中定时器有两种,一种是一次性定时器(setTimeout),另外一种是周期性定时器(setInterval),两种都可以延迟一段时间后再执行某个操作。不同的, setTimeout只执行一次,setInterval则一直执行,直到清除定时器为止。

实际项目中,这两种定时器都会用到,首先来说说setTimeout

setTimeout

一次性定时器,执行一次后,自动取消,也可以在延时之前,取消定时器

function fun() {
    console.log("定时器")
}
setTimeout(fun, 1000);

延迟1秒后控制台打印,定时器是以毫秒为执行单位。也可以用以下方式设置定时器

setTimeout(function () {
    console.log("定时器")
}, 1000);

上面这种方式,如果要清除定时器,是不能清除的,只能在设置定时器的时候,定义一个变量来接收定时器的返回值,这样才可以清除定时器。

var timeFun = setTimeout(function () {
    console.log("定时器")
}, 1000);
clearTimeout(timeFun)

使用setTimeout模拟setInterval

setTimeout(function () {
    // do something
    console.log("定时器")
    setTimeout(arguments.callee, 500)
}, 500)

2 setInterval

周期性定时器,只要不主动清除定时器,就会一直执行

function fun() {
    console.log("定时器")
}
setInterval(fun, 1000);

每隔一秒钟,就会在控制台打印一次。也可以在setInterval里面直接定义

setInterval(function () {
    console.log("定时器")
}, 1000);

同样也是,如果要清除定时器,还是需要定义一个变量来接收定时器的返回值。

var timeFun = setInterval(function () {
    console.log("定时器")
}, 1000);
clearInterval(timeFun)

那我们就说下setInterval的缺点,就是定时器指定的时间间隔,表示的是何时将定时器推送到消息队列,而不是何时执行代码。所以真正何时执行定时器的时间是不能保证的,取决于何时被主线程的事件循环取到并执行。那我们如果要用定时器实现倒数、计时功能,如何避免定时器不准的问题。这里就需要我们使用setTimeout代替setInterval

var startTime = new Date().getTime()
var count = 0;
setInterval(function () {
    var i = 0;
    while (i++ < 100000000);
}, 0);
function fixed() {
    count++;
    var offset = new Date().getTime() - (startTime + count * 1000);
    var nextTime = 1000 - offset;
    if (nextTime < 0) nextTime = 0;
    setTimeout(fixed, nextTime);

    console.log(new Date().getTime() - (startTime + count * 1000));
}
setTimeout(fixed, 1000);

上面方法,通过修正时间来延迟触发,所以就保证了定时器的精准性。

文章来源: blog.csdn.net,作者:NMGWAP,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/NMGWAP/article/details/125066897

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。