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

2021-02-25 09:52:24 阅读：318 来源： 互联网

标签：function 定时器 console 一次性 setInterval JavaScript setTimeout 1000

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

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

1 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);

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

标签：function,定时器,console,一次性,setInterval,JavaScript,setTimeout,1000
来源： https://blog.51cto.com/15057855/2636331

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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