Vue之SetTimeout

1.前言

相信很多人都遇到过这样的问题，页面数据需要不断的刷新，也就是不断的发送ajax请求来更新数据，那么在vue中怎样做才比较好呢？这里介绍一下我踩的坑，以及解决方案

2.问题

settimeout用来调用请求数据，但是我遇到的问题就是，没有用合适的方式去关闭settimeout,出现了离开当前页面，请求还在不断的发送问题，这样给服务器带来了无必要的压力。附上之前的代码：

    self.deployTimeOutId = setTimeout(() => {self.getDeployList(false);}, 5000);

说明：这一段代码是嵌在getDeployList方法中的，离开当前页面的是时候，必须要去手动的把这个settimeout清除才行。一般这个写在destoryed()这个钩子里。

window.clearTimeout(this.deployTimeOutId);

虽然这样处理了，但在逻辑比较复杂的情况下，还是出现了没有关闭的情况，而且排查起来很痛苦。下面介绍一种针对Vue比较好的做法。

3.解决方案

    let self=this;if (self && !self._isDestroyed) {setTimeout(() => {if (self && !self._isDestroyed)self.getDeployList();}, 5000);}

_isDestroyed这个属性表示的是当前这个组件是否有被销毁，true表示当前的组件已经被销毁，通过上面这个判断，我们就不需要自己手动的去用ID来清除了，这个就相当于递归嘛，有了一个结束判断，避免了死循环咯~~

Vue之SetTimeout相关推荐

js vue中setTimeout无法通过clearTimeout清除问题
js vue中setTimeout无法通过clearTimeout清除问题在异步清除中,利用vue 中data存放setTimeout的标识进行清除时,无法清除.则需要在函数前加上window.即可 ...
html 取消settimeout,vue中setTimeout无法通过clearTimeout清除问题
在异步清除中,利用vue 中data存放setTimeout的标识进行清除时,无法清除.则需要在函数前加上window.即可如window.setTimeout与window.clearTimeou ...
vue 定时器 setTimeout
1.最简单的用法,500毫秒后执行,执行结束,定时器自动清除. setTimeout(function() {// 需要执行的代码 }, 500); // 定时时间 2.循环执行定时器 data() ...
setTimeout在vue中的正确使用
笔者最近因为公司需求开发使用vue和jquery开发抓娃娃H5极简小游戏,使用到setTimeout函数.遇到了1个坑: 在vue的某个方法(点击后执行) setTimeout(this.end(), ...
Vue 中的 v-cloak 作用及用法-vue页面加载时会闪烁
用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕 ...
Vue 中的 v-cloak 作用及用法
v-cloak 的作用和用法用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Must ...
vue antd a-table组件设置表头鼠标移入悬浮显示（自定义的表头）
1.看之前,请先异步另一篇文章 antdv table组件封装成全局组件以及携带自定义表头展示 2.具体需求,鼠标移入显示文本 3.参考大佬的文章:a-table组件设置表头鼠标移入悬浮显示 4.在公 ...
setTimeout函数this的指向
一.第一种解释: var obj = {name: 'name',foo: function () {console.log(this); // Object {name: "name&qu ...
VUE中clearTimeout失效问题
研究了很久以为是自己代码的问题结果是VUE封装了setTimeout 在VUE中setTimeout返回一个对象,对象含有**_id**属性,将_id作为参数执行clearTimeout即可生效. / ...

Vue之SetTimeout

1.前言

2.问题

3.解决方案

Vue之SetTimeout相关推荐

最新文章

热门文章