JavaScript 定时器 setTimeout() setInterval() requestAnimationFrame()

最新推荐文章于 2024-07-26 20:46:33 发布

ai_365

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量133

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/ai_365/article/details/137640605

版权

setTimeout()

setTimeout()的作用是在一定延时之后执行某个函。它接受两个参数，第一个参数是函数名称，也可以是箭头函数，第二个参数是延迟的时间，单位为毫秒。

如下示例先定义了要执行的函数，然后将函数名称传给setTimeout()，注意，函数名称后面不可以加括号。

function f(){
        console.log('2秒后')
}
setTimeout(f, 2000)

上述示例在Node.js环境下也同样适用。

setInterval()

setInterval()的作用是按照给定的时间间隔重复执行一个函数。它接受两个参数，第一个参数是函数名称，也可以是箭头函数，第二个参数是间隔时间，单位为毫秒。

可以使用clearInterval()函数取消定时。只需要将setInterval()赋给一个变量，如果要取消定时，将该变量传给clearInterval()即可。如下是一个按秒更新的计数器，在5秒之后便不再更新：

<script>
    
    let a = 0
   
    function f() {
        a = a + 1
        console.log(a)
        if (a == 5) clearInterval(循环)
    }

    const 循环 = setInterval(f, 1000)

</script>

上述示例在Node.js环境下也同样适用。

requestAnimationFrame()

window.requestAnimationFrame() 告诉浏览器希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

requestAnimationFrame()的基本语法如下：

function animation(){
      // 每次执行的逻辑
      requestAnimationFrame(animation)
}
animation()

如下示例代码，变量a会在每帧之后加1：

<body>
</body>
<script>
     let a = 0
     function animation() {
            a = a + 1
            document.body.innerHTML = a
            requestAnimationFrame(animation)
      }
     animation()
</script>

ai_365

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 定时器 setTimeout() setInterval() requestAnimationFrame()

JavaScript 定时器 setTimeout() setInterval() requestAnimationFrame()
复制链接

扫一扫