No.39 JavaScript---定时器之setTimeout以及setInterval

一、定时器

  • JavaScript 提供定时执行代码的功能，叫做定时器(timer)。
  • 主要由setTimeout()和setinterval() 这两个函数来完成。
  • 它们向任务队列添加定时任务。

1.1定时器之setTimeout

  • setTimeout 函数用来指定某个函数或某段代码，在多少毫秒之后执行。
  • 它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。
<body>
    <script>
        setTimeout(function(){
            console.log("大家好，3秒之后执行")
        },3000)
    </script>
</body>

　

  • setTimeout 函数接受两个参数，第一个参数 func|code 是将要推迟执行的函数名或者一段代码，第二个参数 delay 是推迟执行的毫秒数。
<body>
    <script>
        setTimeout(function(){ console.log("大家好，3秒之后执行")},3000)
    </script>
</body>

　　

  • 还有一个需要注意的地方，如果回调函数是对象的方法，那么 setTimeout 使得方法内部的 this 关键字指向全局环境，而不是定义时所在的那个对象。

解决：

 

取消定时器：

<body>
    <script>
        var timer = setTimeout(function(){ console.log("大家好，3秒之后执行")},3000);
        clearTimeout(timer)
    </script>
</body>

　

1.2定时器之setInterval

  • setinterval函数的用法与 setTimeout 完全一致，区别仅仅在于 setinterval 指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行.
<body>
    <script>
        var i = 0;
        setInterval(function(){
            i++;
            console.log(i);
        }, 1000);
    </script>
</body>

取消定时器：

<body>
    <script>
        var i = 0;
        var timer = setInterval(function(){
            i++;
            console.log(i);
        }, 1000);

        clearInterval(timer)
    </script>
</body>

　　

 

1.3例子：动画效果

 

posted @ 2025-03-07 17:09  百里屠苏top  阅读(44)  评论(0)    收藏  举报