js定时器_js定时器重复执行-CSDN博客

本文链接：https://blog.csdn.net/weixin_55355282/article/details/126998517

定时器

js中内置的一个方法

作用

每隔一段时间或者延迟一段时间就执行一段指定的代码

定时器的分类

重复执行定时器

setInterval()

作用

每隔一段时间就会重复执行指定的函数

语法

setInterval(function(){
      代码
},时间）

参数

要执行的函数:时间到了就会执行

时间：间隔的时间

单位：毫秒

1s=1000ms

<style>
        #box{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            font-size: 50px;
        }
    </style>
    <script>
    window.onload=function(){
        var box=document.getElementById("box");
        var i=0;

        box.onclick=function(){
            setInterval(function(){
                box.innerHTML=i;
                i++;
            },1000);
           
        };
    };
</script>
</head>

<body>
   <div id="box"></div>
</body>

<style>
        #box{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            font-size: 50px;
        }
    </style>
    <script>
    window.onload=function(){
        var box=document.getElementById("box");
        var i=0;

        box.onclick=function(){
          setInterval(change,1000);
           //函数在外面定义，这里调用需要用函数名，没有括号（）
        };
        function change(){
            i++;
            box.innerHTML=i;
        }
    };
</script>
</head>

<body>
   <div id="box"></div>
</body>

延迟执行定时器

setTimeout()

作用：延迟执行定时器执行指定函数，只执行一次

语法

setTimeout(function(){
        代码
},时间);

参数

要执行的函数：当时间到达后会执行这个函数

时间：延迟时间

代码和重复执行定时器很相似

   <style>
        #box{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            font-size: 50px;
        }
    </style>
    <script>
    window.onload=function(){
        var box=document.getElementById("box");
        var i=0;

        box.onclick=function(){
            setTimeout(function(){
            i++;
            box.innerHTML=i;
            },1000);
           
        };
       
    };
</script>
</head>
<body>
   <div id="box"></div>
</body>

定时器里的this指向

定时器的this指向window的，因为定时器是window身上的一个方法，所以this指向window

<style>
        #box{
            width: 100px;
            height: 100px;
            border:1px solid #f00;
        }
    </style>
    <script>
        window.onload=function(){
            var box=document.getElementById("box");
            var i=0;
            console.log(this);    //window
            box.onclick=function(){
                console.log(this); //box
                var This=this;//把box存给This，函数内部可以调用
                setInterval(function(){
                    console.log(this); //window
                    i++;
                    box.innerHTML=i;
                },1000);
            };
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>

清除定时器

定时器的编号

定时器的一个返回值，返回一个数字，代表当前定时器的编号，我们可根据这个来清除定时器

它返回的编号在不同的浏览器里面是不同的，所以没办法直接拿编号去清除定时器

清除定时器的方法

1.清除重复执行定时器

clearInterval(定时器的返回值）

可以声明一个变量，把定时器的返回值都存到这个变量里，然后拿这个变量去清除定时器

   <style>
        #box{
            width: 100px;
            height: 100px;
            border:1px solid #f00;
        }
    </style>
  
    <script>
        var n=0;
        function add(){
            n++;
            console.log(n);
            //清除定时器的条件一般会放在定时器执行的函数里
            if(n==8){
                //clearInterval(1);
                clearInterval(timer);
            }
        }
        var timer=setInterval(add,1000);
        // console.log(setInterval(add,1000)setInterval(add,1000));//1
        // setInterval(add,1000);
        //定时器在走的过程中，下面代码也会走
        alert(1);
        if(n==8)
    </script>
</head>
<body>
    <div id="box"></div>
</body>

1.直接把定时器调用放在一个变量赋值的后面，定时器会走吗？

timer使用的时候，定时器已经跑了八次了，页面代码已经跑完了

var timer=setInterval(add,1000);

2.这个timer是在下面声明的，而使用是在上面，可以用到嘛？

2.清除延迟执行定时器

clearTimeout （定时器的返回值）