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>
相关文章
|
16天前
|
JavaScript 前端开发 安全
JavaScript基础-定时器:setTimeout, setInterval
【6月更文挑战第13天】JavaScript中的`setTimeout`和`setInterval`是异步编程的关键工具,用于按计划执行代码。`setTimeout`在延迟后执行一次,而`setInterval`则周期性执行。常见问题包括忘记清除定时器导致内存泄漏,递归使用`setTimeout`可能引发无限递归,以及字符串代码执行的安全隐患。解决方法包括使用`clearTimeout`和`clearInterval`,设置递归终止条件,以及优先使用函数表达式。理解定时器的非精确性并采用错误处理策略也是实践中的重要技巧。通过示例展示了如何延迟显示消息和周期性打印计数。
|
9天前
|
JavaScript 前端开发
杨老师课堂之JavaScript定时器案例的红绿灯设计
杨老师课堂之JavaScript定时器案例的红绿灯设计
12 1
|
8天前
|
JavaScript 前端开发
杨校老师课堂之JavaScript定时器案例的红绿灯设计--原始写法
杨校老师课堂之JavaScript定时器案例的红绿灯设计--原始写法
8 0
|
9天前
|
JavaScript 前端开发
杨老师课堂之JavaScript定时器限时抢购秒杀商品案例
杨老师课堂之JavaScript定时器限时抢购秒杀商品案例
9 0
|
1月前
|
JavaScript 前端开发
JavaScript定时器
JavaScript定时器
|
JavaScript 前端开发 小程序
javascript setinterval 正确的语法
前几天我用setinterval 写了一个小程序,这个setinterval是用来干什么的我就不解释了。 写的方法在其它的浏览器里都能用,后来测试组的同事拿去一测就出了问题。
808 0
|
15天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
165 63
|
15天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的小型医院医疗设备管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的小型医院医疗设备管理系统附带文章源码部署视频讲解等
29 6
|
15天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园健康驿站管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园健康驿站管理系统附带文章源码部署视频讲解等
36 5
|
3天前
|
XML 缓存 JavaScript
一篇文章讲明白JS模板引擎之JST模板
一篇文章讲明白JS模板引擎之JST模板