解决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 通用订单代码
Dec 23 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 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
PHP写日志的实现方法
2014/11/05 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
js 解决“options为空或不是对象”
2008/12/22 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
javascript基础知识
2016/06/07 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
python处理cookie详解
2014/02/07 Python
python uuid模块使用实例
2015/04/08 Python
django输出html内容的实例
2018/05/27 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
微信公众号token验证失败解决方案
2019/07/22 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
智利最大的网上商店:Linio智利
2016/11/24 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
《社戏》教学反思
2014/04/15 职场文书
大学生村官演讲稿
2014/04/25 职场文书
领导工作表现评语
2015/01/04 职场文书
门面租赁合同范文
2019/08/06 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis