清除JS定时器setInterval方法防止if条件语句判断无效的解决方案

简介: 清除JS定时器setInterval方法防止if条件语句判断无效的解决方案

在同一页面,如果不通过clearInterval()清除的话,if条件语句的判断都是无效的,会一直定时执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>漏刻有时数据可视化组件开发实例</title>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<input type="button" value="开始" id="oBtn1">
<input type="button" value="结束" id="oBtn2">
<script>
    var oBtn1 = document.getElementById("oBtn1");
    var oBtn2 = document.getElementById("oBtn2");
    var timer;
    oBtn1.onclick = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            console.log("index");
        }, 10);
    }
    oBtn2.onclick = function () {
        clearInterval(timer);
    }
</script>
</body>
</html>


Done!

相关文章
|
8天前
|
JavaScript 前端开发 开发者
JavaScript中setInterval与setTimeout的异同及使用
【4月更文挑战第22天】JavaScript的`setInterval`和`setTimeout`都用于定时执行任务,但有区别。`setInterval`会按指定间隔反复执行,直到被`clearInterval`停止,可能导致函数堆积;`setTimeout`只执行一次,延迟后执行,适合递归调用来模拟间隔。选择使用时要考虑任务的重复性、执行依赖及可能的性能影响。
|
19天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
21天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
18 0
|
19天前
|
JavaScript 前端开发 索引
JavaScript中与字符串相关的方法
JavaScript中与字符串相关的方法
|
1天前
|
JavaScript 前端开发
11.JavaScript 事件的概念以及绑定方法
11.JavaScript 事件的概念以及绑定方法
|
4天前
|
JavaScript 前端开发
js 操作数组的方法
js 操作数组的方法
14 4
|
4天前
|
JavaScript 前端开发
JavaScript如何设置定时器,怎么清除定时器
JavaScript如何设置定时器,怎么清除定时器
12 3
|
8天前
|
JavaScript 前端开发 安全
JavaScript中跨域资源共享(CORS):原理和解决方案
【4月更文挑战第22天】本文介绍了JavaScript中跨域资源共享(CORS)的原理和解决方案。CORS借助HTTP头部字段允许跨域请求,核心是Access-Control-Allow-Origin响应头。解决方案包括:服务器端设置响应头(如使用Express.js的cors中间件)、使用代理服务器或JSONP。现代Web开发推荐使用CORS,因为它更安全、灵活,而JSONP已逐渐被淘汰。理解并正确实施CORS能提升Web应用性能和安全性。
|
11天前
|
JavaScript 前端开发
JavaScript Dom方法
JavaScript Dom方法
36 2
|
12天前
|
JavaScript 前端开发
JavaScript 定时器
JavaScript 定时器