JS定时器原理及案例

最新推荐文章于 2024-07-15 16:14:38 发布

前端菜菜阿海

最新推荐文章于 2024-07-15 16:14:38 发布

阅读量1.3k

点赞数 1

分类专栏：前端学习之JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/zxh996/article/details/118573849

版权

本文介绍了JavaScript中的定时器原理，包括setTimeout和setInterval的使用，以及如何通过clearTimeout和clearInterval来清除定时器。文章通过倒计时、定时器的开启与清除以及发送短信等案例，展示了定时器在实际应用中的操作。

摘要由CSDN通过智能技术生成

前言

JS中定时器并不算难点，但是我还是拿出来讲，过于经典的案例往往是最为基础的知识点，仅供参考学习。

一、定时器

setTimeout(code,millisec)：只执行 code 一次。

setInterval(code,millisec)：会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

定时器注释

clearTimeout() ：可取消由 setTimeout() 方法设置的 timeout。

clearInterval() ：可取消由 setInterval() 设置的 timeout。

定时器非常好理解，set就是定时器，clear就是清除定时器，timeout就是定时器只用一次，interval就是循环使用。

二、定时器的使用

1.定时器

代码如下（示例）：

<body>
<script>
    function time() {
     
        alert('倒计时时间到')
    }
    var times = setTimeout(time,3000);
</script>
</body>

倒计时弹窗

2.清除定时器

<body>
<script>
    function time() {
     
        alert('倒计时时间到')
    }
    var times = setTimeout(time,3000);
    clearInterval(times);
</script>
</body>

setInterval（）和cleaInterval（）的原理也是一样的，我就不在这里写了

三、案例

1.倒计时

代码如下（示例）：

    <style>
        div {
     
            margin: 200px;
        }

        span {
     
            display: inline-block;
            width: 40px;
            height: