解决js中的setInterval清空定时器不管用问题
使用场景：我在函数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中SetInterval与setTimeout的定时器用法
示例一: 查看演示 下载源码 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除.也就是说setTimeout()只执行一次,setInterval()可以执行多次.两个函数的参数也相同,第一个参数是要执行的code或句柄,第二个是延迟的毫秒数. setTimeOut用法 setTimeout函数的用法如下: var timeoutID = window.setTi
-
详解JS中定时器setInterval和setTImeout的this指向问题
前言 Js是一个单线程语言,可以通过setTimeout()和setInterval()来设置代码在指定时刻运行,前者是在指定时间后执行,后者是指每隔一段时间执行.两者的使用方法类似. 最近在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,详细的介绍通过一个示例展开,一起来看看吧. 如下例: var num = 0; function Obj (){ this.num = 1, this.getNum =
-
Javascript中setTimeOut和setInterval的定时器用法
Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等等.但它们的应用是有区别的. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除.也就是说setTimeout()只执行一次,setInterval()可以执行多次.两个函数
-
JavaScript定时器setTimeout()和setInterval()详解
本文实例为大家分享了JavaScript定时器的具体方法,供大家参考,具体内容如下 1. 超时调用setTimeout() 顾名思义,超时调用的意思就是在一段实际之后调用(在执行代码之前要等待多少毫秒) setTimeout()他可以接收两个参数: 1.要执行的代码或函数 2.毫秒(在执行代码之前要等待多少毫秒) function test(){ alert("孙悟空"); } setTimeout(test,2000); //2s后弹出 "孙悟空" clearTi
-
理解javascript定时器中的setTimeout与setInterval
一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 setTimeout: var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]); var timeoutID = window.setTimeout(code, delay); timeoutID 是该延时操作的数字ID,
-
解决js中的setInterval清空定时器不管用问题
使用场景:我在函数A中调用定时器函数,定时器是单独写的一个函数 原因:页面加载时我调用了1次函数A,然后又单独调用了一次定时器函数,导致调用了2次setInterval(),导致有setInterval_id有2个值. 通过打印定时器的值发现的问题. clearInterval()只关闭了其中一个setInterval_id,另一个setInterval_id还会启动setInterval(). 解决方法:把单独调用的定时器函数去掉. 补充知识:js vue中setTimeout无法通过clea
-
快速解决js中window.location.href不工作的问题
E6中在html中<a>标识中通过JS添加click事件调用一个JS函数,例如: < script type = "text/javascript" > function jump () { window . location . href = 'http://www.jb51.net' ; } function enjoy () { return false ; } < /script> html代码: <a href= "java
-
escape函数解决js中ajax传递中文出现乱码问题
本文实例讲述了escape函数解决js中ajax传递中文出现乱码问题,分享给大家供大家参考.具体方法如下: 一.问题描述: 本来网页特效中的escape()是将中文按iso-8859-1字符集进行url编码的,那样通过 request.getparameter()是能直接获取到请求参数的,但后来的javascript将escape()换成了unicode字符集编 码,如此一来,在jsp教程和servlet中就没法直接拿到请求参数了,具体原因我也不知道. 二.解决办法: 1.首先对中文字符进行两次
-
完美解决JS中汉字显示乱码问题（已解决）
如题,刚才看了几篇大家的讨论,忽然也想起要将自己最近研究的问题贴出来,凡是和JS中乱码相关的问题都发到这里把,大家一起研究.:) 场景一:write写出来的内容是utf-8格式的,如果保存的write数据中有不是utf-8编码的中文,对write嵌套俩次以上就会有乱码.由于手头没有现成的文件,刚才临时制作了一个,这是1.htm页面的代码: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type"
-
解决JS中乘法的浮点错误的方法
JS里做小数的乘法运算时会出现浮点错误,具体可以测试一下: <script> alert(11*22.9) </script> 结果是251.89999999999998 而不是251.9 这个问题想必有很多人为之头痛.那么如何解决呢?在此给出解决办法. 1. 复制代码 代码如下: <script> alert(11*(22.9*10)/10): </script> 解决问题的大概思路就是,先把因数放大为整数,最后再除以相应的倍数,这样就能得到正确的结果了.
-
解决js中window.open弹出的是上次的缓存页面问题
解决window.open打开的页面会保存缓存的问题. 在页面的head标签中加入以下代码 复制代码 代码如下: <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Expires" con
-
js中的setInterval和setTimeout使用实例
setInterval() 定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来执行函数或表达式.该方法会不停地循环调用函数,直到使用 clearInterval() 明确停止该函数或窗口被关闭.clearInterval() 函数的参数即 setInterval() 返回的 ID 值. 语法 setInterval(code,millisec[,"lang"])code 必需.要调用的函数或要执行的代码串.millisec 必须.周期性执行或调用 code 之间
-
JS中2种定时器的使用及清除的实现
目录 一.什么是定时器? 二.定时器的分类 1.一次性定时器: 2.周期性定时器: 三.清除定时器 一.什么是定时器? 定时器就是由JS提供了一些原生方法来实现延时去执行某一段代码. 二.定时器的分类 1.一次性定时器: setTimeout: 设置一个定时器,在定时器到期后执行一次函数或代码段 使用方法:var timer=setTimeout(fun,毫秒数) 清除的方法:clearTimeout(timeoutId) //一次性 var timeoutId = window.setTime
-
快速掌握Node.js中setTimeout和setInterval的使用方法
Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInterval的使用. 一.setTimeout超时计时器(和GCD中的after类似) 在node.js中可以使用node.js内置的setTimeout(callback,delayMillSeconds,[args])方法.当调用setTime()时回调函数会在delayMillSeconds后 执行
-
JS中SetTimeout和SetInterval使用初探
一切尽在代码截图中,愿意和大家一起成长!可以喷,毕竟是菜鸟! 好了,废话不多说了,看具体实例代码吧! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="wraper">