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中定时器的使用的更多相关文章

  1. SqlServer中怎么删除重复的记录(表中没有id)

    SqlServer中怎么删除重复的记录(表中没有id) 其实我在别的网址也查到过删除重复的记录,不知道我是我SqlServer2012版本太低还是啥原因 delete from scwhere (c# ...

  2. 025——VUE中事件的基本使用与VUE中差异

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue中解决时间在ios上显示NAN的问题

    最近在用vue,遇到倒计时在ios上显示为NAN的问题. 因为做的是倒计时支付,思路是获取服务器时间和下单时间,再转成秒级时间戳做差值. 在网上找到说是ios 不支持例如2018-09-01 10:0 ...

  4. Set中如何区分重复元素

    Set接口常用实现类:HashSet和TreeSet HashSet区分重复元素: 先使用hashcode方法判断已经存在HashSet中元素的hashcode值和将要加入元素hashcode值是否相 ...

  5. 解决Vue中文本输入框v-model双向绑定后数据不显示的问题

    前言 项目中遇到一个问题就是在Vue中双向绑定对象属性时,手动赋值属性后输入框的数据不实时更新的问题. <FormItem label="地址" prop="eve ...

  6. vue中8种组件通信方式, 值得收藏!

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...

  7. vue中mixins的理解及应用

    vue中mixins的理解及应用 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...

  8. Vue中组件之间的通信方式

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 本文会介绍组件间通信的8种方式如下图所示, 并介绍在不同的场景下如何选择有效方式实现的 ...

  9. Vue中组件间通信的方式

    Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...

随机推荐

  1. r0capture安卓应用层通杀脚本-使用文档

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! r0capture安卓应用层通杀脚本-使 ...

  2. 使用.NET简单实现一个Redis的高性能克隆版（六）

    译者注 该原文是Ayende Rahien大佬业余自己在使用C# 和 .NET构建一个简单.高性能兼容Redis协议的数据库的经历. 首先这个"Redis"是非常简单的实现,但是他 ...

  3. Pulsar Summit Asia 2020 中文专场议题出炉！

    关于 Apache Pulsar Apache Pulsar 是 Apache 软件基金会顶级项目,是下一代云原生分布式消息流平台,集消息.存储.轻量化函数式计算为一体,采用计算与存储分离架构设计,支 ...

  4. Luogu2543[AHOI2004]奇怪的字符串 (动态规划 LCS)

    04年的省选这么water吗,开个滚动数组算了 #include <iostream> #include <cstdio> #include <cstring> # ...

  5. 10大python加速技巧

    简介 目前非常多的数据竞赛都是提交代码的竞赛,而且加入了时间的限制,这就对于我们python代码的加速非常重要.本篇文章我们介绍在Python中加速代码的一些技巧.可能不是很多,但在一些大的循环或者函 ...

  6. CSS 选择器（二）：子代选择器(>)

    后代选择器 后代选择器选择的范围广,范围是当前节点的所有子节点,包括其直接子节点. <div id="app"> <div>items-1 <div& ...

  7. Minio分布式集群部署——Swarm

    最近研究minio分布式集群部署,发现网上大部分都是单服务器部署,而minio官方在github上现在也只提供了k8s和docker-compose的方式,网上有关与swarm启动minio集群的文章 ...

  8. OpenJudge1.5.17

    20:球弹跳高度的计算 总时间限制: 1000ms 内存限制: 65536kB 描述 一球从某一高度落下(整数,单位米),每次落地后反跳回原来高度的一半,再落下. 编程计算气球在第10次落地时,共经过 ...

  9. InnoDB_锁总结

    1. 查询会对资源添加共享锁 加了共享锁的资源不可以被修改:但可以被查询(也是会在资源上再加共享锁) 2. 数据修改会对资源添加排他锁 加了排他锁的资源只能被持有这个排他锁的事务读取和修改,其他事务读 ...

  10. 【Shashlik.EventBus】.NET 事件总线，分布式事务最终一致性

    [Shashlik.EventBus].NET 事件总线,分布式事务最终一致性 简介 github https://github.com/dotnet-shashlik/shashlik.eventb ...