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

简介: JS实现可以控制的定时器,setInterval,clearInterval

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>
相关文章
|
30天前
|
JavaScript 前端开发 开发者
JavaScript中setInterval与setTimeout的异同及使用
【4月更文挑战第22天】JavaScript的`setInterval`和`setTimeout`都用于定时执行任务,但有区别。`setInterval`会按指定间隔反复执行,直到被`clearInterval`停止,可能导致函数堆积;`setTimeout`只执行一次,延迟后执行,适合递归调用来模拟间隔。选择使用时要考虑任务的重复性、执行依赖及可能的性能影响。
|
1天前
|
JavaScript 前端开发 安全
JavaScript基础-定时器:setTimeout, setInterval
【6月更文挑战第13天】JavaScript中的`setTimeout`和`setInterval`是异步编程的关键工具,用于按计划执行代码。`setTimeout`在延迟后执行一次,而`setInterval`则周期性执行。常见问题包括忘记清除定时器导致内存泄漏,递归使用`setTimeout`可能引发无限递归,以及字符串代码执行的安全隐患。解决方法包括使用`clearTimeout`和`clearInterval`,设置递归终止条件,以及优先使用函数表达式。理解定时器的非精确性并采用错误处理策略也是实践中的重要技巧。通过示例展示了如何延迟显示消息和周期性打印计数。
|
30天前
|
JavaScript 前端开发
JavaScript定时器
JavaScript定时器
|
30天前
|
JavaScript 前端开发 UED
JavaScript 持续变化:setTimeout 与 setInterval 的巧妙应用
JavaScript 持续变化:setTimeout 与 setInterval 的巧妙应用
24 1
|
30天前
|
JavaScript 前端开发 数据处理
JavaScript 游戏规则:setTimeout和setInterval的对决
JavaScript 游戏规则:setTimeout和setInterval的对决
18 1
|
30天前
|
JavaScript 前端开发
JavaScript如何设置定时器,怎么清除定时器
JavaScript如何设置定时器,怎么清除定时器
39 3
|
JavaScript 前端开发 小程序
javascript setinterval 正确的语法
前几天我用setinterval 写了一个小程序,这个setinterval是用来干什么的我就不解释了。 写的方法在其它的浏览器里都能用,后来测试组的同事拿去一测就出了问题。
806 0
|
15小时前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园食堂订餐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园食堂订餐系统附带文章源码部署视频讲解等
28 10
|
15小时前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园失物招领网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园失物招领网站附带文章源码部署视频讲解等
20 9
|
15小时前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园生活服务平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园生活服务平台附带文章源码部署视频讲解等
24 9