vue中使用定时器setTimeout

最新推荐文章于 2023-12-14 17:00:19 发布
原创 最新推荐文章于 2023-12-14 17:00:19 发布 · 2.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue中使用setTimeout

本文分享了在VUE项目中使用setTimeout定时器遇到的问题及解决方法。详细介绍了因未清除定时器导致页面异常刷新的Bug，并提供了在组件销毁前正确清除定时器的代码示例。

今天有一个需求就是页面需要几秒中调一次请求，自然用setTimeout，然后就发现有一个Bug，明明设置的是5秒，可是页面却一直刷新，根本不是5秒，后来感觉是因为没有清除定时器，修改之后，发现是这样的，应该在VUE销毁前的钩子里面清除定时器：
这里附上一点点代码：
在这里插入图片描述
注意定时器都是有返回值的，这里推荐一个讲的很详细的定时器设置及其清除的链接：http://www.cnblogs.com/wangying731/p/5164780.html

Vue中使用定时器setInterval和setTimeout
m0_49714202的博客
12-15 4788
js中定时器有两种，一个是循环执行setInterval，另一个是定时执行setTimeout 一、循环执行（setInterval） 顾名思义，循环执行就是设置一个时间间隔，每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉 用法是setInterval（“方法名或方法”，“延时”）， 第一个参数为方法名或者方法，注意为方法名的时候不要加括号,第二个参数为时间间隔 常见方法。在data中声明一个变量，定时器绑定到变量中，然后在beforeDestory中销毁这个定时器 举个例子: 方案一: 首先我在
vue定时器的写法和setTimeout和setInterval的区别
zouyang920的博客
08-31 2667
0、前言介绍 setTimeout和setInterval都属于JS中的定时器，可以规定延迟时间再执行某个操作，不同的是setTimeout在规定时间后执行完某个操作就停止了，而setInterval则可以一直循环下去。 function fun(){ alert('hello'); } setTimeout(fun,1000);//参数是函数名 setTimeout('fun()',1000);//参数是字符串 setInterval(fun,1000); setInterval(
vue 定时器 setTimeout 的使用
java初识者
08-25 3万+
1、最简单的用法，500毫秒后执行，执行结束，定时器自动清除。 setTimeout(function() { // 需要执行的代码 }, 500); // 定时时间 2、循环执行定时器 data() { return { // 定时器 monitorUser: "", // 接收定时器id，便于清除定时器 } }, onHide() { // 清除定时器 clearTimeout(that.monitorUser); }, onShow() {
Vue中使用 setTimeout() setInterval()函数的问题
10-18
主要介绍了Vue中使用 setTimeout() setInterval()函数的问题 ,需要的朋友可以参考下
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
10-15
主要介绍了解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【VUE】vue项目开发中，setTimeout等定时器的管理。
hustxiaoxian的专栏
08-27 6万+
一、问题来源。 在项目中，我们经常有这样的需求，一个页面初始化后，需要不断的去请求后端，来获取当前某个记录的最新状态。 显然，这个可以用setTimeout以及回调中继续setTimeout来实现。 我们假设定时器是在页面#/test/aaa上创建的。 但是，会遇到以下两个问题，我从#/test/aaa   这个页面切换到  #/test/bbb页面后如果停留在#/test/bbb，定时器
vue中setTimeout的使用
youshuang1207的博客
07-07 635
vue项目开发中setTimeout等定时器的管理问题
12-11
在Vue项目开发中，使用`setTimeout`等定时器常常会面临一些管理问题，尤其是在涉及到页面路由切换时。本文将详细探讨这些挑战，并提供相应的解决策略。 首先，问题来源于需要在页面初始化后持续向后端请求数据以...
VUE中setTimeout和setInterval自动销毁案例
10-14
补充知识：在Vue中使用`setTimeout`时，如果页面未通过刷新而是仅通过路由切换，定时器不会自动清除。这是因为路由切换并不会终止JavaScript执行，只有页面卸载或刷新才会清除定时器。例如： ```javascript data() ...
setTimeout在vue中的正确使用
热门推荐
大唐锦绣的博客
10-25 13万+
笔者最近因为公司需求开发使用vue和jquery开发抓娃娃H5极简小游戏，使用到setTimeout函数。遇到了1个坑: 在vue的某个方法(点击后执行) setTimeout(this.end(),4000);//娃娃消失 这里奇怪的是,end方法的确被执行了。但是没有执行4s后执行的效果。那我要你合用呢！其实，问题还是出在笔者身上，大家请看下图 setTimeout的定义和用法。问题出...
Vue 中的 $nextTick 和 setTimeout 方法使用
EverythingAtOnce的博客
12-14 2064
nextTick和setTimeout都是在异步环境中执行代码的方式，但各自适用于不同的场景。Vue 的nextTick提供了一种优雅的方式来确保在 DOM 更新后执行操作，而setTimeout则是 JavaScript 中常用的延迟执行方法。
在vue中如何实现准时的setTimeout
MYuanFang的博客
12-14 2576
当每一次定时器执行时后，都去获取系统的时间来进行修正，虽然每次运行可能会有误差，但是通过系统时间对每次运行的修复，能够让后面每一次时间都得到一个补偿。通过系统的时间补偿，能够让我们的 setTimeout 变得更加准时，至此我们完成了如何让 setTimeout 准时的探索。setTimeout 是。
vue定时器setInterval、setTimeout
@@小旭的博客
09-04 1095
定时执行 setTimeout 是设置一个时间，等待时间到达的时候只执行一次，但是执行完以后定时器还在，只是不再运行；循环执行就是设置一个时间间隔，每过一段时间都会循环执行这个方法,直到这个定时器被销毁掉；1、循环执行setInterval。2、定时执行setTimeout。
Vue中使用定时器实现轮询setTimeout
weixin_42565137的博客
05-17 8185
最近做一个扫码二维码的需求，生成二维码后需要通过轮询在判断登录状态。这里我先用的定时器简单的实现了一下轮询，后面会对接到websocket handleQrcodeCheck() { let vm = this; vm.timer_id = setTimeout(() => { //vm.timer_id需要先在data中定义 vm.$http ...
vue settimeout 实例_分享：vue使用技巧和项目中遇到的问题
weixin_31706903的博客
02-03 372
这里给大家分享一下vue中的一些技巧，希望对大家有用处。(话不多说上代码)1，vue路由拦截浏览器后退实现表单保存类似需求(为了防止用户突然离开，没有保存已输入的信息。)//在路由组件中：mounted(){},beforeRouteLeave (to, from, next) { if(用户已经输入信息){ //出现弹窗提醒保存表单，或者自动后台为其保存 }else{ next(true);/...
Vue延时函数setTimeout
wa123579的博客
05-08 1万+
单位是毫秒 setTimeout(() => { //代码 }, 1000);
vue3使用定时器
最新发布
05-04
### 如何在 Vue3 中正确使用 `setInterval` 和 `setTimeout` #### 基本概念 `setTimeout` 是用来设置一个计时器，在指定的时间（毫秒）后仅执行一次给定的回调函数[^3]。而 `setInterval` 类似于 `setTimeout`，但它会在每隔指定的时间间隔重复执行给定的函数，适用于需要定期执行的任务[^3]。 #### 手动管理定时器 如果未使用第三方工具库，则可以通过手动保存和清除定时器的方式来实现功能： ```javascript export default { data() { return { timer: null, // 存储定时器 ID }; }, mounted() { // 使用 setTimeout 实现延迟任务 this.timer = setTimeout(() => { console.log('This will run after 2 seconds'); }, 2000); // 使用 setInterval 实现周期性任务 this.timer = setInterval(() => { console.log('This runs every second'); }, 1000); }, beforeUnmount() { // 清除定时器以防内存泄漏 clearTimeout(this.timer); // 如果是 setTimeout 则清除它 clearInterval(this.timer); // 如果是 setInterval 则清除它 } }; ``` 以上代码展示了如何通过生命周期钩子 `mounted` 设置定时器以及通过 `beforeUnmount` 钩子清理它们，防止组件卸载后仍继续运行定时器造成不必要的性能开销[^4]。 #### 自动化销毁定时器的方式 为了更优雅地处理定时器问题，可以借助外部工具库如 `tools-javascript` 或者其针对不同框架定制化的版本来简化操作流程[^2]。以下是基于该工具的一个简单例子： 安装依赖： ```bash npm install tools-vue3 ``` 配置入口文件(main.js)： ```javascript import { Scope } from 'tools-vue3'; import { TimerBean } from 'tools-uniapp'; // 若为 uni-app 环境需单独导入此模块 Scope.TimerBean = TimerBean; ``` 实际应用到某个 .vue 文件中的情况如下所示： ```javascript <script> import { Scope } from 'tools-vue3'; export default { setup() { const timer = Scope.Timer(); // 单次延时任务 timer.once(() => { console.log('Executed once after 2s.'); }, 2000); // 循环定时任务 timer.on(() => { console.log('Repeated execution every 2s.'); }, 2000); return {}; }, unmount() { // 不再需要显式调用 clear 方法，因为当作用域结束时会自动释放资源 } } </script> ``` 这种方式能够确保即使忘记主动去清理这些异步逻辑也不会引发潜在的风险，因为它内部已经帮我们做好了相应的机制设计[^2]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值