JavaScript[20] -- 定时器-优快云博客

本文介绍了JavaScript中定时器的相关知识，包括setTimeout()、setInterval()、requestAnimationFrame()等函数的使用方法，以及clearTimeout()、clearInterval()、cancelAnimationFrame()等清除定时器的方法，还给出了5s后跳转百度的案例。

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

定时器

都是不精确的
定时器里的事件属于下一次事件队列,定时器时间再短,也是定时器后面的代码先执行,然后才是定时器里面的代码执行
每一个定时器都对应这一个序号,从1开始排列,用后需要清除定时器

setTimeout()

用来指定某个函数或字符串在指定的毫秒数之后执行,只会执行一次
第一参数为函数,作为执行体，第二个参数为执行间隔时间（毫秒）
注意:对函数传递参数的时候,可以把实参放在执行间隔时间的后面(不兼容IE9及以下,在IE里面用闭包的形式去写)

clearTimeout()

清除定时器,参数为定时器的名称

<script>
    // 不兼容IE9及以下
    var timer1 = setTimeout(function(a, b){
        console.log(a + b);     // 3
    },1000,1,2);

    document.onclick = function(){
        clearTimeout(timer1);    // 清除计时器1
        clearTimeout(timer2);    // 清除计时器2

        console.log("停止定时器 " + timer1);    // 停止定时器 1   
        console.log("停止定时器 " + timer2);    // 停止定时器 2 
    }

    // 兼容IE9及以下的闭包写法
    var timer2 = setTimeout((function(a, b){
        return function(){
            console.log(a + b); // 3
        }
    })(1,2),1000);
</script>

setInterval()

setInterval()和setTimeout()一样,但是会无限执行

clearInterval()

参数为定时器clearInterval()的名称

<script>
    var str = "a";
    var obj = {
        str : "b",
        foo : func,
    }
    function func(){
        console.log(this.str);
    }

    let timer1 = setInterval(obj.foo,1000);     // a  不是b，函数作为参数传递会造成隐式丢失，this指向Window
    let timer2 = setInterval(function(){
        console.log("b");
    },1000);

    document.onclick = function(){
        console.log("停止定时器");
        clearInterval(timer1);
        clearInterval(timer2);
    }
    console.log(timer1,timer2);     // 1 2  此行代码优先于定时器里的代码执行
</script>

案例

5s后跳转百度

<div id="wrap">页面将在<span>5s</span>之后跳转</div>
<script>
    let oSpan = document.getElementsByTagName("span")[0],
        num = 5;
    let timer = setInterval(function(){
        num --;
        oSpan.innerHTML = `${num}s`;
        if(num===0){
            window.open("http://www.baidu.com","_self");
            clearInterval(timer);
        }
    },1000);
</script>

requestAnimationFrame()

现在做动画使用的帧函数（不兼容IE10及以下）
注意：它除了在外部执行函数体,也要在执行函数体里面自己执行

cancelAnimationFrame()清除定时器

<script>
    // 这是requestAnimationFrame的兼容写法
    window.requestAnimationFrame = (function(){
       return  window.requestAnimationFrame ||
               window.webkitRequsetAnimationFrame ||
               window.mozRequestAnimationFrame ||
               window.oRequestAnimationFrame ||
               window.msRequestAnimationFrame ||
               function(callback){
                   window.setTimeout(callback,1000/60);
               };
   })();
   
   let a = 0;
   
   function func(){
       a++;
       console.log(a);
       requestAnimationFrame(func);
   }
   
   requestAnimationFrame(func);
</script>