JS计时事件——setInterval、setTimeout

最新推荐文章于 2022-09-05 21:45:00 发布

打马御街前

最新推荐文章于 2022-09-05 21:45:00 发布

阅读量432

点赞数 2

本文链接：https://blog.youkuaiyun.com/Meatball_MMY/article/details/90692565

版权

博客介绍了JavaScript计时事件的两个关键方法setInterval和setTimeout，阐述其优缺点、语法和实例，还说明了停止执行的方法。同时介绍了使用Date计时，其优点是切换页面或缩小窗口可停止计时，但不能设置时间，最后提醒1000毫秒为1秒。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、计时事件的两个关键方法是：setInterval、setTimeout

优点：可以设置时间

缺点：切换到其他页面或缩小窗口时不能停止计时

1.setInterval:间隔指定的毫秒数不停地执行指定的代码

语法：

window.setInterval("javascript 函数",毫秒数);

实例：

1）一次性延时器（只能执行一次）

setTimeout(function (){
console.log(1);
},1000);

结果：只输出一次1

2）循环计时器

var t=null;
 showtime();
 function showtime(){
 console.log(1);
 t=setTimeout("showtime()",1000);
 }

结果：间隔一秒循环输出一次1

停止执行：clearInterval:用于停止setInterval()方法执行的函数代码

要使用 clearInterval() 方法, 在创建计时方法时必须使用全局变量。

语法：

window.clearInterval(intervalVariable);

实例：

clearInterval(t);停止执行上述代码

2.setTimeout:暂停执行的毫秒数后执行指定的代码

语法：

window.setTimeout("javascript 函数",毫秒数);

实例：

var t=null;
t=setInterval(function(){
    console.log(1);
},1000)
clearTimeout(t);

停止执行：clearTimeout:用于停止setTimeout()方法执行的函数代码

要使用 clearTimeout() 方法, 在创建超时方法时必须使用全局变量。

语法：

window.clearTimeout(TimeoutVariable);

实例：

clearTimeout(t);停止计时

二、使用Date计时

优点：切换到其他页面或缩小窗口时可以停止计时

缺点：不能设置时间

实例：

var time=new Date().getTime();
loop();
function loop(){
    var times=new Date().getTime();
    if(times-time>=1000)
    {
        time=times;
        console.log(1);
    }
    times=null;
    window.requestAnimationFrame(loop);
}

结果：根据秒输出1

注意：1000毫秒是1秒。