电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

解決vue 使用setTimeout,離開當前路由setTimeout未銷毀的問題

瀏覽:113日期:2023-01-02 08:44:01

問題:

從第一個頁面跳轉(zhuǎn)到第二個頁面后,如果停留在第二個頁面,定時器還在運行。如果在兩個頁面之間來回跳轉(zhuǎn),跳轉(zhuǎn)時間小于定時器的間隔時間時,也會出現(xiàn)重復創(chuàng)建setTimeout的情況。

原因:

當我們刷新頁面時,會將當前頁面之前創(chuàng)建的setTimeout以及其他定時器都清除掉,但是僅僅是路由切換是不會清除的。

data () { return { ct: null }},methods: { start() { this.ct= setTimeout( () => {that.countdown(end)}, 1000) } end() { clearTimeout(this.ct); //清除 }}

setInterval()計時也需要clearInterval()來清除

補充知識:小記VUE下setTimeOut和setInterval遇到的問題

相信大家對著兩個函數(shù)都陌生,就是一個定時器,setTimeOut只執(zhí)行一次,而setInterval會重復執(zhí)行

需要注意的是:在setInterval不用的時候一定要用clearSetInterval關(guān)閉定時器。

說一下最近開發(fā)中遇到的問題,我是用vue開發(fā)的,順便記錄這個錯誤。

我需要輪詢接口,所以使用setInterval。

// 我是想沒2秒執(zhí)行一次myFunc這個函數(shù)。setInterval(this.myFunc(),2000)//某個函數(shù)myFunc () { console.log(123)}

但實際的運行結(jié)果是,只執(zhí)行了一遍,并沒有循環(huán)執(zhí)行。

原因是setInterval接受兩個參數(shù),第一個為要執(zhí)行的函數(shù),第二個為時間(毫秒)。

這里我犯的錯誤是,我寫的是一個函數(shù)的執(zhí)行this.myFunc() 因為加了()是一個執(zhí)行,而不是個函數(shù)。

于是我又改成這樣寫了,在寫個匿名函數(shù),函數(shù)體是我要執(zhí)行的。

setInterval(function () { this.myFunc()},2000)//某個函數(shù)myFunc () { console.log(123)}

理論上這樣是沒問題的,會每2秒執(zhí)行一次this.myFunc(),但卻報錯了。

原因是 老生常談的javaScript 的this 的問題。

因為用的一個function(){} 這里的 獨立的作用域 this指向了全局(這里是window)而且window里沒有myFunc這個函數(shù),所報了錯。

用過vue的朋友應該,基本vue中都是this.XXX這樣寫。這里的this是Vue對象。

所以為了使this正確指向vue,我用了ES6的尖頭函數(shù)。

最終

setInterval(() => { this.myFunc()},2000)//某個函數(shù)myFunc () { console.log(123)}

尖頭函數(shù)因為它的特殊性,它的this指向它外層的對象。

其實主要說的是第二個問題,第一個屬于對函數(shù)不熟悉,第二個則是VUE,ES6,this指向綜合的問題。

以上這篇解決vue 使用setTimeout,離開當前路由setTimeout未銷毀的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。

標簽: Vue
主站蜘蛛池模板: 英思科GTD-3000EX(美国英思科气体检测仪MX4MX6)百科-北京嘉华众信科技有限公司 | 影像测量仪_三坐标测量机_一键式二次元_全自动影像测量仪-广东妙机精密科技股份有限公司 | 齿轮减速机电机一体机_齿轮减速箱加电机一体化-德国BOSERL蜗轮蜗杆减速机电机生产厂家 | 英国公司注册-新加坡公司注册-香港公司开户-离岸公司账户-杭州商标注册-杭州优创企业 | 郑州爱婴幼师学校_专业幼师培训_托育师培训_幼儿教育培训学校 | 对辊破碎机-液压双辊式,强力双齿辊,四辊破碎机价格_巩义市金联机械设备生产厂家 | 矿用履带式平板车|探水钻机|气动架柱式钻机|架柱式液压回转钻机|履带式钻机-启睿探水钻机厂家 | 丁基胶边来料加工,医用活塞边角料加工,异戊二烯橡胶边来料加工-河北盛唐橡胶制品有限公司 | 3d可视化建模_三维展示_产品3d互动数字营销_三维动画制作_3D虚拟商城 【商迪3D】三维展示服务商 广东健伦体育发展有限公司-体育工程配套及销售运动器材的体育用品服务商 | 珠海冷却塔降噪维修_冷却塔改造报价_凉水塔风机维修厂家- 广东康明节能空调有限公司 | 水质监测站_水质在线分析仪_水质自动监测系统_多参数水质在线监测仪_水质传感器-山东万象环境科技有限公司 | PCB厂|线路板厂|深圳线路板厂|软硬结合板厂|电路板生产厂家|线路板|深圳电路板厂家|铝基板厂家|深联电路-专业生产PCB研发制造 | 本安接线盒-本安电路用接线盒-本安分线盒-矿用电话接线盒-JHH生产厂家-宁波龙亿电子科技有限公司 | 宿松新闻网 宿松网|宿松在线|宿松门户|安徽宿松(直管县)|宿松新闻综合网站|宿松官方新闻发布 | 气象监测系统_气象传感器_微型气象仪_气象环境监测仪-山东风途物联网 | 河南凯邦机械制造有限公司| 物流之家新闻网-最新物流新闻|物流资讯|物流政策|物流网-匡匡奈斯物流科技 | 二手光谱仪维修-德国OBLF光谱仪|进口斯派克光谱仪-热电ARL光谱仪-意大利GNR光谱仪-永晖检测 | 北京模型公司-工业模型-地产模型-施工模型-北京渝峰时代沙盘模型制作公司 | 成都顶呱呱信息技术有限公司-贷款_个人贷款_银行贷款在线申请 - 成都贷款公司 | 中细软知识产权_专业知识产权解决方案提供商 | 订做不锈钢_不锈钢定做加工厂_不锈钢非标定制-重庆侨峰金属加工厂 | 液氮罐(生物液氮罐)百科-无锡爱思科| 苏州工作服定做-工作服定制-工作服厂家网站-尺品服饰科技(苏州)有限公司 | 蓄电池回收,ups电池后备电源回收,铅酸蓄电池回收,机房电源回收-广州益夫铅酸电池回收公司 | 干洗加盟网-洗衣店品牌排行-干洗设备价格-干洗连锁加盟指南 | 工业设计,人工智能,体验式3D展示的智能技术交流服务平台-纳金网 J.S.Bach 圣巴赫_高端背景音乐系统_官网 | 台式低速离心机-脱泡离心机-菌种摇床-常州市万丰仪器制造有限公司 | 水质传感器_水质监测站_雨量监测站_水文监测站-山东水境传感科技有限公司 | 磁力加热搅拌器-多工位|大功率|数显恒温磁力搅拌器-司乐仪器官网 | 钢格板|热镀锌钢格板|钢格栅板|钢格栅|格栅板-安平县昊泽丝网制品有限公司 | 酶联免疫分析仪-多管旋涡混合仪|混合器-莱普特科学仪器(北京)有限公司 | 东莞爱加真空科技有限公司-进口真空镀膜机|真空镀膜设备|Polycold维修厂家 | 茅茅虫AI论文写作助手-免费AIGC论文查重_写毕业论文降重 | 海峰资讯 - 专注装饰公司营销型网站建设和网络营销培训 | 智能化的检漏仪_气密性测试仪_流量测试仪_流阻阻力测试仪_呼吸管快速检漏仪_连接器防水测试仪_车载镜头测试仪_奥图自动化科技 | 合肥白癜风医院_[治疗白癜风]哪家好_合肥北大白癜风医院 | 原色会计-合肥注册公司_合肥代理记账公司_营业执照代办 | 工业洗衣机_工业洗涤设备_上海力净工业洗衣机厂家-洗涤设备首页 bkzzy在职研究生网 - 在职研究生招生信息咨询平台 | 干粉砂浆设备_干混砂浆生产线_腻子粉加工设备_石膏抹灰砂浆生产成套设备厂家_干粉混合设备_砂子烘干机--郑州铭将机械设备有限公司 | 电伴热系统施工_仪表电伴热保温箱厂家_沃安电伴热管缆工业技术(济南)有限公司 |