解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用
1、问题描述
在一些需求开发中、需要设定软件提供服务的时间段（营业时间）。这时可以选择定时器来实现、可以选择让定时器每隔一段时间检测当前时间是否在服务时间。到达服务时间、进入服务状态。未到服务时间、进入非服务时间段。可能会遇到的问题？ 当进行不同服务的切换、退出等操作 需要多次经过定时器的方法时、造成的后果就是定时器开启多次。导致页面功能混乱。怎样解决这一个问题呢？ 方法很简单、就是在开启定时器之前、先将上一个开启的定时器关闭（直接在开启定时器的代码之前、编写清除上一次设置的定时器）。这样、无论多少次经过开启定时器的方法、都始终能保持只有一个定时器在工作。
2、模拟一个场景
2.1 假如多次调用（或者业务流程必须经过）开启定时器的方法、就会造成定时器开启多次
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>定时器</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<h1>当前num：{{num}}</h1>
<button @click="startTimer()">点我开启定时器</button>
<button @click="StopTimer()">点我关闭定时器</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
let timerd = null
//创建Vue实例
new Vue({
el: '#App',
data: {
value: "Vue",
newTime: '',
num: 1,
// timerd: ''
},
methods: {
StopTimer() {
console.log("当前关闭的定时器的值：" + timerd)
clearInterval(timerd)
},
startTimer() {
// clearInterval(timerd)
console.log(timerd)
console.error("开启了定时器")
timerd = setInterval(() => {
this.num++
}, 1000)
console.log("当前定时器的值：" + timerd)
}
},
})
</script>
</body>
</html>
2.2 测试效果
2.3 只需要稍微改动、在开启定时器之前、关闭上一个定时器
2.4 实现效果
3、定时器的基本使用常识
- setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
- setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
3.1 setInterval()
- 语法：
setInterval(code,millisec,lang)
| 参数 | 描述 |
|---|---|
| code | 必需。要调用的函数或要执行的代码串。 |
| millisec | 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。 |
| lang | 可选。 JScript、VBScript 、 JavaScript |
3.2 setTimeout()
- 语法：
setTimeout(code,millisec,lang)
| 参数 | 描述 |
|---|---|
| code | 必需。要调用的函数后要执行的 JavaScript 代码串。 |
| millisec | 必需。在执行代码前需等待的毫秒数。 |
| lang | 可选。脚本语言可以是：JScript 、 VBScript 、JavaScript |
4、模拟定时器的开关
4.1 代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>定时器</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<h1>当前num：{{num}}</h1>
<button @click="startTimer()">点我开启定时器</button>
<button @click="StopTimer()">点我关闭定时器</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
let timerd = null
//创建Vue实例
new Vue({
el: '#App',
data: {
value: "Vue",
newTime: '',
num: 1,
// timerd: ''
},
methods: {
StopTimer() {
console.log("当前关闭的定时器的值：" + timerd)
clearInterval(timerd)
},
startTimer() {
console.error("开启了定时器")
timerd = setInterval(() => {
this.num++
}, 1000)
console.log("当前定时器的值：" + timerd)
}
},
})
</script>
</body>
</html>
4.2 测试效果
解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用的更多相关文章
- SqlServer中怎么删除重复的记录(表中没有id)
SqlServer中怎么删除重复的记录(表中没有id) 其实我在别的网址也查到过删除重复的记录,不知道我是我SqlServer2012版本太低还是啥原因 delete from scwhere (c# ...
- 025——VUE中事件的基本使用与VUE中差异
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中解决时间在ios上显示NAN的问题
最近在用vue,遇到倒计时在ios上显示为NAN的问题. 因为做的是倒计时支付,思路是获取服务器时间和下单时间,再转成秒级时间戳做差值. 在网上找到说是ios 不支持例如2018-09-01 10:0 ...
- Set中如何区分重复元素
Set接口常用实现类:HashSet和TreeSet HashSet区分重复元素: 先使用hashcode方法判断已经存在HashSet中元素的hashcode值和将要加入元素hashcode值是否相 ...
- 解决Vue中文本输入框v-model双向绑定后数据不显示的问题
前言 项目中遇到一个问题就是在Vue中双向绑定对象属性时,手动赋值属性后输入框的数据不实时更新的问题. <FormItem label="地址" prop="eve ...
- vue中8种组件通信方式, 值得收藏!
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
- vue中mixins的理解及应用
vue中mixins的理解及应用 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...
- Vue中组件之间的通信方式
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 本文会介绍组件间通信的8种方式如下图所示, 并介绍在不同的场景下如何选择有效方式实现的 ...
- Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...
随机推荐
- 后端编写Swagger接口管理文档
Swagger接口管理文档 访问接口文档的网页:http://localhost:8080/swagger-ui/index.html 导入依赖 <dependency> <grou ...
- Vmware 虚拟机连接外网和设置固定IP
NAT 模式(地址转换模式) 在NAT模式中,主机网卡直接与虚拟NAT设备相连,然后虚拟NAT设备与虚拟DHCP服务器一起连接在虚拟交换机VMnet8上,虚拟机借助NAT功能,通过宿主机器所在的网络来 ...
- SecureCRT 和 Xshell 连接ENSP 教程
前言:很多人问我说想尝试使用 CRT和Xshell连接 ENSP的某台设备,以模拟现网中的工作状态,所以出了这篇随笔. ENSP版本: Xshell 连接教程 Xshell 7 评估版(其他版本没测试 ...
- Ubuntu系统apt添加第三方PPA源
一.前言 1.1目的 在使用Ubuntu时往往apt源会自带很多常用软件,但是大部分都是比较老的版本,本文主要是为了实现以下两个目的: 通过添加第三方的PPA源解决软件版本过低或者没有安装包的情况: ...
- Python入门系列（十）一篇学会python文件处理
文件处理 在Python中处理文件的关键函数是open()函数.有四种不同的方法(模式)来打开一个文件 "r" - 读取 - 默认值.打开一个文件进行读取,如果文件不存在则出错. ...
- 记一次 .NET 某数控机床控制程序 卡死分析
一:背景 1. 讲故事 前段时间有位朋友微信上找到我,说它的程序出现了卡死,让我帮忙看下是怎么回事? 说来也奇怪,那段时间求助卡死类的dump特别多,被迫训练了一下对这类问题的洞察力 ,再次声明一下, ...
- 微软出品自动化神器Playwright，不用写一行代码（Playwright+Java）系列（一） 之 环境搭建及脚本录制
一.前言 半年前,偶然在视频号刷到某机构正在直播讲解Playwright框架的使用,就看了一会,感觉还不错,便被种草,就想着自己有时间也可以自己学一下,这一想着就半年多过去了. 读到这,你可能就去百度 ...
- ElasticSearch介绍和基本用法(一)
ElasticSearch 引言 1.在海量数据中执行搜索功能时,如果使用MySQL, 效率太低. 2.如果关键字输入的不准确,一样可以搜索到想要的数据. 3.将搜索关键字,以红色的字体展示. 介绍: ...
- 开源即时通讯GGTalk 8.0发布，增加Linux客户端，支持在统信UOS、银河麒麟上运行！
GGTalk在2021年推出7.0后,经过一年多时间的开发,终于推出8.0版本,实现了Linux客户端. 这几年,信创国产化的势头越来越猛,政府事企业单位都在逐步转向使用国产OS.国产CPU.国产数据 ...
- Java SE Object类
1.Object类 equals 方法 == 和 equals 的对比 == 是一个比较运算符 == 既可以判断基本类型,又可以判断引用类型 == 如果判断的是基本类型,判断的是值是否相等 == 如果 ...