前端学习17 | JavaScript的定时器

最新推荐文章于 2024-05-22 23:41:41 发布

原创最新推荐文章于 2024-05-22 23:41:41 发布 · 321 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了JavaScript中的两种定时器：间隔定时器setInterval用于周期性执行任务，延时定时器setTimeout则在指定时间后执行一次任务。同时，还讲解了如何使用clearInterval和clearTimeout来关闭定时器。这些知识对于前端开发和JavaScript编程非常重要。

文章目录

前言
一、间隔定时器
二、延时定时器
三、关闭定时器
总结

前言

下面介绍一个小的常用知识点。

一、间隔定时器

语法：setInterval(函数，时间)

函数：指的是每次要执行的内容
时间：单位是毫秒

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        setInterval(
            function(){
                console.log('一个一个一个')
            }
            ,1000
        )
    </script>
</body>
</html>

运行结果为：
在这里插入图片描述
前面的数字代表执行了几次，会随着时间逐渐增加。

二、延时定时器

语法：setTimeout(函数，时间)

函数：指的是每次要执行的内容
时间：单位是毫秒

和上一个差不多。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        setTimeout(
            function(){
                console.log('一个一个一个')
            }
            ,1000
        )
    </script>
</body>
</html>