解决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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
javascript实现回到顶部特效
May 06 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
vue 实现全选全不选的示例代码
Mar 29 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 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
如何开发一个虚拟域名系统
2006/10/09 PHP
php图片验证码代码
2008/03/27 PHP
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
在Python中使用HTML模版的教程
2015/04/29 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
set在python里的含义和用法
2019/06/24 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
领导检查欢迎词
2014/01/14 职场文书
开学第一周总结
2015/07/16 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python