vue 设置定时执行函数——进阶版（离开页面停止定时，clearInterval() 方法）

最新推荐文章于 2024-05-20 16:01:05 发布
最新推荐文章于 2024-05-20 16:01:05 发布
阅读量2.7k 收藏 7
点赞数 3
分类专栏： vue 文章标签： vue java vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sai_gao/article/details/108072520
版权

我在vue页面写了echarts折线图，数据更新通过定时器来执行。然鹅，离开页面就开始报错了。
显示图表为空不能读取
原因是，

离开页面，定时器并不会停止，但是图表已经不在了。

怎么办呢？我研究了一下，vue有生命周期，

在beforeDestroy()里面加上停止定时就好了。

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

beforeDestroy(){
	clearInterval(this.t)
}

created()里面写上

created(){
	this.t=setInterval(this.timer,1000)
}

好的，完成了。细节下次补充

喵喵喵

喵(* ￣3)(ε￣ *)
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html页面退出关闭定时器,JavaScript设置定时器、取消定时器及执行机制解析
weixin_28884213的博客
06-05 2600
今天整理了一下 JavaScript 定时器，顺便了解了一下 JavaScript 的运行机制，现在记录一下。JavaScript 执行机制浏览器( JavaScript 引擎)执行 JavaScript 的机制是基于事件循环的。由于 JavaScript 是单线程，同一时间只能执行一个任务。为了避免某些长时间任务造成无意义等待，JavaScript 引入了异步概念。同步任务直接在主线程队列中顺序...
前后端定时任务 vue中setInterval启动与停止
yizhishuangsheng的博客
05-04 1472
前端中使用vue setInterval间隔一定时间请求后端接口去检查是否上传当天温度,这是第一种方法,第二种方法是使用后端定时任务去检测,将未检测温度数据使用websocket主动推送到前端,因为http只能从浏览器单方面向服务器发起请求获得相应,服务器不能主动向浏览器推送消息,所以使用websocket。最近在写毕业设计,方舱医院管理系统,里面有一个需求,需要前台用户定时监测是否上传自己的温度数据.给用户间隔一定时间去提醒它没有上传温度。
return终止函数的几种情况
王源源源源的博客
12-16 2342
function getSum(num1,num2){ //1.return 终止函数 return 后面的代码不会被执行 return num1 + num2; alert('不执行') } console.log(getSum(1,2)); //2.return 只能返回一个值 function fn(num1,num2){ return num1,num2;//返回的结果是最后一个值 } console.log(fn(1,2)); //3.我们任意两个数的加减乘数结果.
vue项目中定时器使用
jane_xing的博客
05-20 819
在Vue项目开发中，定时器是一种常用的技术手段。setTimeout，是JavaScript中的一个内置函数，可以在指定的时间延迟后执行一段代码；只执行一次；setInterval，是JavaScript中的常用的定时器函数，可以按照指定时间间隔重复执行一段代码；这里我们重点介绍setInerval的用法。当我们要实现定时更新界面或者轮询接口数据时，用setInterval非常合适。
函数的拦截（Vue数组方法响应化）
红叶落水的博客
02-21 739
红叶何时落水 首先明白原型链是啥 关键语句：儿子原型的__proto__属性指向父亲的prototype属性，构造函数的prototype属性的constructor属性指向其本身； 经典美图 需求：Vue中data中的数据发生改变时，set属性可以确保响应式；但是我们只是在最开始的时候将所有的data数据都重新定义过一次； 当我们使用数组方法添加数据时，我们该如何保证新添加的数据是响应式的呢。 对象方法调用会沿着原型链向上寻找，一旦找到，就停止。 那么我们可以插入一个节点，让数.
vue离开页面时如何销毁定时器
coldriversnow的专栏
06-06 3466
描述：采用vm.$once问题原因是 setInterval 计时器本身是由全局window 调用，所以 计时器的事件 不能绑定在 组件的的 this 身上，只能 绑定在 普通变量身上vue离开页面销毁定时器vue 是单页面应用，路由切换后，定时器并不会自动关闭，需要手动清除，当页面被销毁时，清除定时器即可。
在vue中使用 setTimeout ,退出页面后,计时器没有销毁
zgzga的博客
06-04 4107
问题：页面在使用 setTimeout 定时循环某方法，或者在两个页面之间跳转时间小于定时器的时间间隔时，定时器还在运行。 原因:当我们刷新页面时，会将当前页面之前创建的 setTimeout 以及其他定时器都清除掉,但是仅仅是路由切换是不会清除的。 data (){ return{ clearTime: '' } }, mounted () { randomGet () { // 在 1分钟到 2分钟之间 不定时执行 var r = Math.random() * (2 - 1)
vue页面离开后执行函数的实例
08-27
在标题提到的“vue页面离开后执行函数的实例”中，作者分享了如何利用这个钩子来实现所需功能。 Vue的生命周期是每个Vue组件从创建到销毁的过程，它包括多个阶段，每个阶段都有相应的钩子函数供开发者使用。`...
vue离开当前页面触发的函数代码
10-14
在Vue.js框架中，开发人员有时需要在用户离开当前页面时执行特定的清理或保存操作。这通常涉及到组件的生命周期钩子，特别是`beforeRouteLeave`导航守卫或`destroyed`生命周期钩子。让我们详细了解一下这两个方法...
vue 页面回退mounted函数不执行的解决方案
10-15
在开发过程中，开发者可能会遇到一个问题：当从一个页面跳转到另一个页面，然后再通过浏览器的返回按钮回退到原来的页面时，发现原始页面的 `mounted` 钩子函数并没有再次执行，导致数据无法更新。这个问题涉及到 ...
详解Vue.js在页面加载时执行某个方法
10-17
在页面加载时执行方法，根据具体需求选择合适的钩子函数可以确保操作在正确的时间进行。在实际开发中，还可以结合Vue的异步组件、路由守卫（router guards）等特性，以实现更复杂的页面加载逻辑。 总的来说，Vue.js...
Vue 中定时器setInterval和setTimeout
宁夏前端工程师，马卫斌，wx：1457508895
05-28 1105
循环执行 setInterval 顾名思义，循环执行就是设置一个时间间隔，每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉 用法是setInterval（“方法名或方法”，“延时”）， 第一个参数为方法名或者方法，注意为方法名的时候不要加括号,第二个参数为时间间隔 <template> <section> <h1>hello world~</h1> </section> </template> &lt...
vue中setInterval停不下来,且越来越快,简直和色狼一样
码蝗的博客
05-29 1604
vue中使用setInterval# Copy this.chatTimer = setInterval(() => { console.log(this.chatTimer); this.chatMsg(); }, 1000); 然后再组件销毁前进行清除 Copy beforeDestroy() { clearInterval(this.chatTimer); this.chatTimer = null; } 根据 setInterval 返回的 id 打印来看,..
vue组件里定时器销毁问题
seimeii的博客
04-14 2780
我在a页面写一个定时器，让他每秒钟打印一个1，然后跳转到b页面，此时可以看到，定时器依然在执行。这样是非常消耗性能的。 方案1（推荐）： 该方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。 const timer = setInterval(() => { // 定时器操作 }, 1000) // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。 this.$once('hook:beforeDestroy', () => {
vue setinterval定时器通过clearinterval无法关闭问题(已解决)
许你七十年的博客
08-20 3479
在vue项目中经常遇到使用setinterval定时器事件，但是在页面关闭或者刷新时需要进行定期清除，但是经常会遇到clearinterval来清除定期无法清除的问题。 有的说把单纯的setinterval和clearintervar 改为 windows.setinterval和window.clearinter即可解决，但对于我目前而言，确还是无法清除，这是怎么回事呢？ 经过尝试，发现是this指针问题，从console来看，生成interval id确实也是正确的， 但是通过windo...
VUE设置和清除定时器
热门推荐
marsur的博客
10-26 1万+
keep-alive > 有缓存的作用，可以使被包裹的组件状态维持不变，当路由被 keep-alive 缓存时不走 beforeDestroy 生命周期。被包含在 < keep-alive > 中创建的组件，会多出两个生命周期钩子: activated 与 deactivated。在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。该方法与在生命周期钩子beforeDestroy中清除定时器的操作原理一样，但更有优势。
Vue+$route 循环执行定时器，并销毁
fyydashen的博客
12-21 706
要实现的功能： 1. 当我初次打开一个页面时，就开始循环执行定时任务，定时刷新页面列表； 2. 当我离开或关闭当前页面时，销毁定时器任务； 3. 当我再一次进入打开的页面时，又开始循环执行定时任务。 因为页面之间是路由跳转，所以用beforeDestroy方法并不能执行销毁定时器。所以我使用的是监听路由跳转来操作。 mounted() { // 初次打开页面执行获取列表方法和定时任务 this.getNatRule(); // methods里的方法 this.timer = set
vue 计时器开始暂停重置继续
qq_44783086的博客
03-13 1649
【代码】vue 计时器开始暂停重置继续。
vue项目的停止_Vue监听页面刷新和关闭功能
weixin_32461163的博客
12-30 1993
我在做项目的时候，有一个需求，在离开(跳转或者关闭)购物车页面或者刷新购物车页面的时候向服务器提交一次购物车商品数量的变化。将提交的一步操作放到 beforeDestroy 钩子函数中。beforeDestroy() { console.log('销毁组件')this.finalCart()},但是发现 beforeDestroy 只能监听到页面间的跳转，无法监听到页面刷新和关闭标签页。所以还是...
vue3定时执行函数
最新发布
06-05
在 Vue 3 中，你可以使用 `Vue.nextTick` 或者 `setTimeout`、`setInterval` 来实现在一定时间后执行一个函数。这里简单介绍一下这两种方法： 1. **Vue.nextTick()**: `nextTick()` 是 Vue 的内部方法，确保在下一次 DOM 更新循环结束后执行回调。这对于依赖于 DOM 已更新的操作非常有用。例如，你可能希望在数据改变后等待视图渲染完成再执行某些操作： ```javascript this.value = 'new value'; this.$nextTick(() => { console.log(this.value); // 在DOM更新后输出新值 }); ``` 2. **setTimeout() 和 setInterval()**: 如果你需要定期执行某个任务，可以使用 JavaScript 的 `setTimeout` 和 `setInterval`。例如，每秒更新一次计时器： ```javascript const timerId = setTimeout(() => { this.currentTime = new Date().toLocaleTimeString(); }, 1000); // 如果需要停止计时器，可以这样取消： clearTimeout(timerId); ``` 对于 `setInterval`，你需要传递一个清除函数以便在不再需要时停止定时器： ```javascript let intervalId; function startTimer() { intervalId = setInterval(() => { this.someValue++; }, 1000); } function stopTimer() { clearInterval(intervalId); } startTimer(); // 当不需要了调用 stopTimer() 停止定时器 ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值