vue中利用setInterval进行轮询调用及如何利用clearInterval停止轮询

最新推荐文章于 2024-06-14 10:40:58 发布
最新推荐文章于 2024-06-14 10:40:58 发布
阅读量1.1k 收藏 2
点赞数
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/buukyjmvni/article/details/115553318
版权

之前因为接口返回数据有延迟，首先是返回null，过几秒才会返回真实数据。所以做了个两秒的轮询调用，轮询成功了但是根本停不下来哈哈哈哈，控制台疯狂打印…
查了资料发现我的 clearInterval()用得不对，怪不得停不下来。这里记录一下。

首先setInterval需要赋给一个变量，随便在本地return里设置一个a：
在这里插入图片描述
在这里插入图片描述
然后通过条件判定轮询停止，clearInterval()的时候，直接停止a就好了：
在这里插入图片描述
每天记录一个弱智小问题😂

啊花549
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue项目要求调用接口先渲染数据，然后开始5秒钟轮询接口
weixin_42596011的博客
02-11 781
在 Vue 项目中，您可以使用 axios 等 HTTP 库在页面创建前先获取数据，然后使用 setInterval() 方法每隔 5 秒轮询一次接口。 例如： mounted() { this.getData(); this.interval = setInterval(() => { this.getData(); }, 5000); }, beforeDestroy...
vue轮询接口实现
江城的博客
12-19 3239
mounted() { //轮询接口 // let that = this // const timers = window.setInterval(() => { // setTimeout(res =>{ // that.saveData(‘1’) // },0)//利用定时器清除setInterval的每次叠加 // }, 600000);//10分钟执行一次 /...
vuejs: 解决浏览器切换页面后setInterval计时器停止执行的问题
qq_39460057的博客
11-27 3439
Worker-Loader插件的主要作用是将我们的JavaScript文件转换为Web Worker线程。它可以将我们的JavaScript文件打包成一个独立的文件,该文件可以在Web Worker中运行。如果需要在切换页面后继续执行定时器，可以使用Web Worker，它是在后台运行的程序，不受页面切换影响。setInterval定时器是基于当前页面的，如果切换到其他页面，定时器会被暂停。2、配置：在webpack.base.config.js文件中，3、创建js文件：my.worker.js。
vue setInterval启动与停止
isjier的博客
07-30 5865
vue setInterval启动与停止 data () { return { otimer:null, } }, mounted () { this.otimer = setInterval(() => { //逻辑 }, 6000); this.$once('hook:beforeDestroy', () => {//页面关闭 console.log('自闭了') clearInt
Vue项目 定时器(setInterval)实现轮询接口（定时刷新页面，重新渲染数据实时更新）
最新发布
蓝胖子的博客
06-14 1566
Vue项目 定时器(setInterval)实现轮询接口（定时刷新页面，重新渲染数据实时更新）
vue 停掉页面上所有的setInterval setTimeout定时器
moerduo0的博客
09-11 1075
【代码】vue 停掉页面上所有的setInterval setTimeout定时器。
setInterval()定时循环调用接口，达到触发条件停止执行
qq_41157351的博客
10-26 2624
setInterval() 定时循环执行 setTimeout() 只执行一次 var id=self.setInterval(function(){ axios .post( `url`, qsStringify({ str1: str1, str2: str2, }) ) .then(res => { console.log(res); if(res.data=="do
Vue 中定时器setInterval和setTimeout
宁夏前端工程师，马卫斌，wx：1457508895
05-28 1121
循环执行 setInterval 顾名思义，循环执行就是设置一个时间间隔，每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉 用法是setInterval（“方法名或方法”，“延时”）， 第一个参数为方法名或者方法，注意为方法名的时候不要加括号,第二个参数为时间间隔 <template> <section> <h1>hello world~</h1> </section> </template> &lt...
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
10-16
在Vue项目中，有时我们需要实现消息的横向滚动效果，特别是在实时更新信息的场景下，例如一个组件周期性地轮询获取消息，然后传递给另一个组件显示。然而，在实际操作过程中，可能会遇到一个问题：消息滚动的速度...
Vue使用轮询定时发送请求代码
11-19
在Vue.js中，我们可以利用`setInterval`函数来创建一个定时器，每隔一定时间间隔执行特定的函数，例如发送请求。 以下是一个简单的Vue组件示例，演示如何实现轮询功能： ```html <div></div> export default ...
Vue使用axios轮询获取数据
qq_38955602的博客
03-11 2309
VUE项目使用axios向后台轮询获取数据
前后端定时任务 vue中setInterval启动与停止
yizhishuangsheng的博客
05-04 1530
前端中使用vue setInterval间隔一定时间请求后端接口去检查是否上传当天温度,这是第一种方法,第二种方法是使用后端定时任务去检测,将未检测温度数据使用websocket主动推送到前端,因为http只能从浏览器单方面向服务器发起请求获得相应,服务器不能主动向浏览器推送消息,所以使用websocket。最近在写毕业设计,方舱医院管理系统,里面有一个需求,需要前台用户定时监测是否上传自己的温度数据.给用户间隔一定时间去提醒它没有上传温度。
setInterval重复调用与停止
Bruce小鬼
01-04 2915
在前端开发过程中，遇到下面的场景选择setInterval方法可以解决。
VUE实现轮询，每几秒访问一次，并且超过一定的次数就停止轮询
qq_43809782的博客
03-30 2082
VUE实现轮询，每几秒访问一次，并且超过一定的次数就停止轮询vue代码 vue代码 代码如下. loopResult (paraDate) { let i=0; console.log("开始轮循请求"); let timer = setInterval(() => { this.fun(timer,paraDate,i++) }, 10000) }, fun (timer,data,i) { s
js轮询及关闭轮询代码实现
白不懂黑的静的专栏
09-11 4383
var s = 0;//设置轮询次数 var _time; _time = setInterval(() => { //此处写自己的业务逻辑。。。。。。 s ++; if(s > 29){ //最大轮询30次，及90秒后，关闭轮询 clearInterval(_time); } }, 3000);//3000:每3000秒轮询一次 ...
vue 轮询实现（含路由切换时终止轮询）
u012914342的博客
04-01 1135
1.定义一个定时器，便于停止 data () { return { timer: undefined } } 2.在方法中设置轮询 this.timer = setInterval(() => { setTimeout(this.轮询方法名(), 0) // eslint下会报xxx is defined but never used，加个console.log就好了 console.log(this.timer) }, 150
window.setInterval()启动轮询， window.clearInterval()无法结束
qq_34281886的博客
04-01 549
今天在作一个定时任务轮询时，使用按钮开启轮询任务，再次点击按钮设置关闭轮询任务，发现轮询不能被正常关闭，代码如下： methods:{ switchChange(val) { if (val) { this.time = window.setInterval(()=>{ console.log("轮询");//被轮询任务 }，2000) } ...
vue中setinterval函数用法
weixin_42672802的博客
11-09 875
【代码】vue中setinterval函数用法。
Vue 定时器(setInterval,setTimeout)实现轮询接口
mo911108的博客
06-20 3381
【代码】Vue 定时器(setInterval,setTimeout)实现轮询接口。
帮我写出vue轮询请求接口请求成功停止轮询的代码
06-09
好的，以下是一个简单的示例代码： ``` <template> <div> <p v-if="data">{{ data }}</p> </div> </template> <script> import axios from 'axios'; export default { data() { return { data: null, pollTimer: null, // 轮询计时器 }; }, mounted() { this.startPolling(); }, methods: { startPolling() { // 发起轮询请求 this.pollTimer = setInterval(() => { axios.get('/api/data') .then(response => { if (response.data === 'success') { this.stopPolling(); // 成功时停止轮询 } else { this.data = response.data; } }) .catch(error => { console.log(error); }); }, 1000); // 每秒请求一次 }, stopPolling() { clearInterval(this.pollTimer); }, }, }; </script> ``` 这是一个Vue组件，当组件挂载时会启动轮询请求，每秒请求一次 `/api/data` 接口，并根据接口返回值更新页面数据。当接口返回值为 `'success'` 时，会调用 `stopPolling` 方法停止轮询请求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值