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中定时器的使用相关推荐

js显示格式化代码并高亮（vue中实现代码高亮）
文章目录 js 实现代码格式化调用 api 实现代码高亮引入用法 highlight.js 高亮代码不换行 innerText 和 innerHTML 有什么区别解决 innerHTML 渲染 ...
JS【发布订阅设计模式】在vue中的实际运用
什么是发布订阅模式? 订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有订阅者对象,使它们能够自动更新自己的状态. 比如addEv ...
笔记三 vue中封装复用过滤器自定义组件 vue中component选项
题外话: npm install -g express-generator npm安装express框架封装复用 Vue中关于封装复用的内容,属于Vue中的进阶知识,在实战中对开发者的抽象和泛化能力 ...
在vue-cili中使用scss在组件文件.vue中的style标签中输入属性lang=“scss“报错
Module build failed: Error: Missing binding E:\newsproject\node_modules_nod 一定能解决的办法: 1在配置文件包package ...
vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
前端js导出Excel库(js-export-excel)在React/Vue中使用参考
目录前言目前有个需求是不通过后端,前端直接导出表格数据.从网上找了一个库,发现很好用 ,所以简单记录下,方便日后查阅 GitHub地址: [https://github.com/cuikangji ...
vue中使用原始html插值,VUE.JS中的插值表达式、v-cloak、v-text、v-html、v-bind:、v-on:...
插值表达式 {{ x }},类似这样子的就叫插值表达式 v-cloak 使用v-cloak 能够解决插值表达式闪烁的问题,但是要配合style中的display:none.CSS的属性选择器来使用 v ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
在vue中获取微信支付code及code被占用问题的解决？
在vue中获取微信支付code及code被占用问题的解决? 参考文章: (1)在vue中获取微信支付code及code被占用问题的解决? (2)https://www.cnblogs.com/pana ...

解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用