JS实现可以控制的定时器，setInterval，clearInterval

GeekLiHua

发布于 2025-01-21 15:50:21

4100

代码可运行

文章被收录于专栏：JavaJava

运行总次数：0

代码可运行

JS实现可以控制的定时器，setInterval，clearInterval

效果展示

概述

简介：本文通过JavaScript中的语法讲解，js是如何实现定时器的开启与停止的。

学习代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
    <script>
    // 首先获取元素
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; // 全局变量  null是一个空对象
        // 给begin按钮添加事件
        begin.addEventListener('click', function() {
        // 给timer函数赋值
            timer = setInterval(function() {
                console.log(new Date())                
            }, 1000);
        })
        // 给stop按钮添加一个清空Inteterval的事件
        stop.addEventListener('click', function() {
            clearInterval(timer);
        })
    </script>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-01-20，如有侵权请联系 cloudcommunity@tencent.com 删除

setinterval