解决js中的setInterval清空定时器不管用问题


Posted in Javascript onNovember 17, 2020

使用场景:我在函数A中调用定时器函数,定时器是单独写的一个函数

原因:页面加载时我调用了1次函数A,然后又单独调用了一次定时器函数,导致调用了2次setInterval(),导致有setInterval_id有2个值。

通过打印定时器的值发现的问题。

clearInterval()只关闭了其中一个setInterval_id,另一个setInterval_id还会启动setInterval()。

解决方法:把单独调用的定时器函数去掉。

补充知识:js vue中setTimeout无法通过clearTimeout清除问题

在异步清除中,利用vue 中data存放setTimeout的标识进行清除时,无法清除。则需要在函数前加上window.即可

如window.setTimeout与window.clearTimeout

具体代码如下

精简后的代码。

环境为electron-vue 渲染进程异步获取主进程上html并渲染到页面、过程中需要有loading的显示。

setTimeout 与clearTimeout 未加window时,this.timeOutLoading事件总会被触发。

<template>
<div id="dev">
    <el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loading">
    <el-tab-pane label="文档" name="first">
      <div v-html="html"></div>
    </el-tab-pane>
     <el-tab-pane label="设置" name="second">
      <v-devCard></v-devCard>
    </el-tab-pane>
    </el-tabs>
</div>
</template>

<script>
  const {ipcRenderer:ipc} = require('electron');

export default {

  data(){
    return{
      activeName: 'second',
      html:'',
      loading:false,
      timeOutLoading:0
    }
  },
  methods:{
    handleClick(tab, event) {
    if(tab.name == 'first' && this.loading == false){
      if(this.timeOutLoading != 0){
        window.clearTimeout(this.timeOutLoading);
      }

      this.html = "<div style='text-align:center; height:200px; line-height:200px;'>加载中...</div>";
      this.loading = true;
      this.timeOutLoading = window.setTimeout(() => {
        if(this.loading == true){
          this.loading = false;
          this.html = "<div style='text-align:center; height:200px; line-height:200px;'>加载超时</div>";
        } 
      }, 3000);

      window.setTimeout(() => {
        ipc.send("getPage");
      }, 500);
       
    }
   }
  },
  mounted(){
    ipc.on('getPage-reply', (event, arg) => {
        if(this.timeOutLoading != 0){
          window.clearTimeout(this.timeOutLoading);
          this.timeOutLoading = 0;
        }      
        this.loading = false;
        this.html = arg; 
      });
  }
}
</script>

以上这篇解决js中的setInterval清空定时器不管用问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
springboot+vue实现文件上传下载
Nov 17 #Vue.js
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 #Vue.js
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 #Vue.js
Vue项目利用axios请求接口下载excel
Nov 17 #Vue.js
vue实现下载文件流完整前后端代码
Nov 17 #Vue.js
vue+iview实现文件上传
Nov 17 #Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 #Vue.js
You might like
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
php自动获取关键字的方法
2015/01/06 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
PHP中cookie知识点学习
2018/05/06 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
Python实现数据库编程方法详解
2015/06/09 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
外语系毕业生求职自荐信
2014/04/12 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
小学语文国培研修日志
2015/11/13 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL