解决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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
在JavaScript中,为什么要尽可能使用局部变量?
Apr 06 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 Javascript
js实现自动锁屏功能
Jun 02 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 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
python正则表达式re模块详解
2014/06/25 Python
Python字符串替换实例分析
2015/05/11 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
如何一键升级Python所有包
2020/11/05 Python
汽修专业学生自我鉴定
2013/11/16 职场文书
工程项目建议书范文
2014/03/12 职场文书
中介业务员岗位职责
2014/04/09 职场文书
学习礼仪心得体会
2014/09/01 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
干部作风建设心得体会
2014/10/22 职场文书
初中成绩单评语
2014/12/29 职场文书
武侯祠导游词
2015/02/04 职场文书
实施意见格式范本
2015/06/05 职场文书
idea下配置tomcat避坑详解
2022/04/12 Servers
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python