问题:页面在使用 setTimeout 定时循环某方法,或者在两个页面之间跳转时间小于定时器的时间间隔时,定时器还在运行。
原因:当我们刷新页面时,会将当前页面之前创建的 setTimeout 以及其他定时器都清除掉,但是仅仅是路由切换是不会清除的。
data (){
return{
clearTime: ''
mounted () {
randomGet () {
var r = Math.random() * (2 - 1) + 1
var t = Math.ceil(r * 60000)
this.clearTime = setTimeout(() => {
this.submit()
this.randomGet()
}, t)
submit () {
console.log('aaaa')
destroyed () {
clearTimeout(this.clearTime)
var inerval=wx.setinterval(function(){},durtion)函数可以产生一个定时执行的函数,返回代表定时器的int值clearinterval(interval)可以清除定时器。
首先定义一个产生interval的方法和结束interval的方法var intervalis;var durtion=1500startinterval:function(){
如果我们没有在组件的生命周期方法中手动清除定时器,在组件被销毁后,该定时器仍然会继续运行,并且由于此时组件实例已经不存在于页面中,虚拟 DOM 无法监测到定时器的状态变化。当我们在 Vue 组件中创建定时器时,实际上是在组件的生命周期方法(例如 mounted )中注册了该定时器。这意味着,在组件被销毁时,虽然页面上已经看不到该组件,但是组件实例却还存在于内存中,而其中包括已经注册的定时器。当一个对象不再被引用时,它仍然可能在内存中保留一段时间,直到垃圾回收机制判断它不再可达时才会被回收。
定时器的使用/清除,关闭页面的清除
设置定时器:setInterval(function,time),清除clearInterval(intervalName)。
我们设置定时器的时候,需要在data里面设置,以便于全局清除
定时器在关闭页面的时候并不会清除,所以要监听页面的关闭,去清除定时器。监听页面卸载函数onUnload()
Page({
* 页面的初始数据
data: {
order_sn:null,
interval:''
设置定时器的
1.setTimeout(function(){},时间) 时间单位是ms(毫秒) 1000ms = 1s。语法:clearTimeout(定时器id) clearInterval(定时器id)定时器id:每一个定时器在开启的时候都会返回一个唯一能标识当前定时器的id,id是从1开始的。间歇定时器:setInterval(function(){},时间)语法:setInterval(function函数,时间)标准浏览器(欧朋 火狐 谷歌 safai,IE(9+))
<input onclick="myAlert()" type="button" value="清除" />
</html>
<script type="tex
在Vue的大型单页应用中,在某个路由下,经常会出现需要延迟执行(setTimeout)或者间隔之心(setInterval)的函数,但是每次在页面destroy之前,都必须手动清理掉。正常代码如下:
beforeDestroy() {
this._timer && clearTimeout(this._timer);
但是如果一不小心,就会忘记,会造成意想不到...
定时器的设置和清除setTimeout、setInterval、setImmediate;JS是单线程运行逻辑,所有的程序默认在一个线程执行,出现排队执行。所有的定时器中,回调函数会在主线程后事件队列中执行。一次性定时器的开启setTimeout()...
setInterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,最终导致页面卡死
解决办法:setTimeout是自带清除定时器的(注:箭头函数解决setTimeout内的this指向问题)
this.timer = setInterval(() => {
setTimeout(() => {
this.xxx()
}, 0)
}, 5000)
如何清除定时器?
例如:在vue页面中写了一个定时器,并且离开当前页面,在**beforeDestory()**方法中进行了清除,但是定时器并未清除,还在继续执行,这种情况该如何解决?
data() {
return {
timer : null
created(){
this.currTime = 0;
this.timer = setInterval(() => {
this.currTime++;