js中的定时器：setTimeout()与setInterval()

最新推荐文章于 2023-03-17 16:24:15 发布

原创最新推荐文章于 2023-03-17 16:24:15 发布 · 268 阅读

1 ·

CC 4.0 BY-SA版权

js方法专栏收录该内容

8 篇文章

订阅专栏

本文深入解析JavaScript中的setTimeout()和setInterval()方法，阐述其语法、使用场景及与clearTimeout()和clearInterval()的区别，帮助读者掌握JavaScript定时器的正确使用。

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

setTimeout

setTimeout()用于在指定毫秒数后再调用函数或计算表达式(以毫秒为单位) 。设置一个定时器，在定时器到期后执行一次函数或代码段。

语法：setTimeout(函数表达式，毫秒数)

setTimeout只执行函数一次，如果需要多次调用可以使用setInterval()，或者在函数体内再次调用setTimeout();

setInterval

setInterval()方法可按照指定的周期来调用函数或计算表达式(以毫秒为单位)。以固定的时间间隔重复调用一个函数或代码段。

语法：setInterval(函数表达式，毫秒数)

setInterval()会不停的调用函数，直到clearInterval()被调用或窗口被关闭，由setInterval()返回的ID值可用作clearInterval()方法的参数。

setTimeout与setInterval的区别：

setTimeout()方法只运行一次，也就是说每当达到设定的时间后就触发运行指定的代码，运行完就结束了，如果还像再次执行同样的函数，可以在函数体内再次setTimeout()，可以达到循环调用的效果。

setInterval()方法是循环执行的，即每达到指定的时间间隔就执行相应的函数或表达式，是真正的定时器。

clearTimeout()与clearInterval()：

要使用clearTimeout()，需要我们设定settimeout()时，给予这个setTimeout()一个名称，这名称就是timeoutId，我们叫停时，就是用这个timeoutId来叫停。与此类似，clearInterval()也需要一个intervalId名称来叫停setInterval()。

var intervalId,timeoutId;
    timeoutId = setTimeout(function(){
        alert(1);
    },1000);

    setTimeout(function(){
        clearTimeout(timeoutId);//叫停上面的函数，此时不会alert出1.
        alert(3);
    });

    setTimeout('console.log("5")',400);

    intervalId = setInterval(function(){
        console.log(4);
        clearInterval(intervalId);// 如果没有此步骤，将会一直console出4
    },200);