在Vue中使用防抖與節(jié)流,及this指向的問題
使用防抖與節(jié)流,及this指向問題
最近項(xiàng)目中遇到了防抖與節(jié)流問題,搜索了很多文章都有this指向的問題,最后不得不采取一種很low的方法
data中定義isFirst為1
if (this.isFirst < 2){ ? ? this.isFirst = 2 ? ? setTimeout(() => { ? ? ? ? this.isFirst = 1 ? ? ? }, 1000) ? }
這樣就形成了假的節(jié)流
但是我們?cè)趺茨芮谶@種寫法
繼續(xù)探索vue項(xiàng)目中用閉包的方式防抖節(jié)流
一頓操作后
?const delay = (function () { ? ? let timeout ? ? return (callback, ms) => { ? ? ? if (timeout) clearTimeout(timeout) ? ? ? let callNow = !timeout ? ? ? timeout = setTimeout(() => { ? ? ? ? timeout = undefined ? ? ? }, ms) ? ? ? if (callNow) callback.apply(this, [callback, ms]) ? ? } ? })() ?export default { ?? ?methods: { ?? ??? ?delay(() => { ? ? ? ? ? // do something ? ? ? ?}, 1000) ?? ?} }
用了立即執(zhí)行的函數(shù)方法,就能夠獲取到全局的this了
使用防抖函數(shù)所遇見的坑
以前的防抖和節(jié)流都是在js中直接書寫,后使用vue進(jìn)行組件化開發(fā)之后,有些地方需要注意。
正常寫法
? ? function debounce(func, delay) { ? ? ? let timeout ? ? ? return function () { ? ? ? ? let context = this; ? ? ? ? let args = arguments; ? ? ? ? if (timeout) { ? ? ? ? ? clearTimeout(timeout) ? ? ? ? } ? ? ? ? timeout = setTimeout(() => { ? ? ? ? ? func.apply(context, args) ? ? ? ? }, delay) ? ? ? } ? ? }
使用
? ? function change(volume, data) { ? ? ? debounce(() => { ? ? ? ? console.log('change', volume, data); ? ? ? }, 500) ? ? }
Vue中寫法使用
注意: Vue中使用時(shí),需要定義timeout,同時(shí)在防抖函數(shù)中,this的指向發(fā)生了變化,需要在return之前獲取vue實(shí)例。這個(gè)時(shí)候,你直接使用,還是不行的,只要debug就會(huì)發(fā)現(xiàn)debounce返回的func沒有進(jìn)去,需要手動(dòng)執(zhí)行一下(添加括號(hào))。
? data() { ? ? return { ? ? ? timeout: null ? ? } ? }
? ? change(volume, data) { ? ? ? this.debounce(() => { ? ? ? ? console.log('change', volume, data) ? ? ? }, 500) ? ? }, ? ? debounce(func, delay) { ? ? ? let context = this // this指向發(fā)生變化,需要提出來 ? ? ? let args = arguments ? ? ? return function () { ? ? ? ? if (context.timeout) { ? ? ? ? ? clearTimeout(context.timeout) ? ? ? ? } ? ? ? ? context.timeout = setTimeout(() => { ? ? ? ? ? func.apply(context, args) ? ? ? ? }, delay) ? ? ? }()// 注意:我加了() ? ? }
Vue中的watch的防抖簡(jiǎn)寫
? ? watchObj: { ? ? ? handler(val) { ? ? ? ? let _this = this ? ? ? ? clearTimeout(this.timeout) ? ? ? ? this.timeout = setTimeout(() => { ? ? ? ? ? _this.handlerData(val) ? ? ? ? }, 500) ? ? ? } ? ? }
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中的請(qǐng)求攔截器和響應(yīng)攔截器用法及說明
這篇文章主要介紹了Vue中的請(qǐng)求攔截器和響應(yīng)攔截器用法及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05vue新建環(huán)境變量以及網(wǎng)絡(luò)請(qǐng)求工具axios的二次封裝詳解
這篇文章主要為大家介紹了vue新建環(huán)境變量以及網(wǎng)絡(luò)請(qǐng)求工具axios的二次封裝詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡(jiǎn)單方法
這篇文章主要給大家介紹了關(guān)于Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡(jiǎn)單方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12vue3源碼剖析之簡(jiǎn)單實(shí)現(xiàn)方法
源碼的重要性相信不用再多說什么了吧,特別是用Vue 框架的,一般在面試的時(shí)候面試官多多少少都會(huì)考察源碼層面的內(nèi)容,下面這篇文章主要給大家介紹了關(guān)于vue3源碼剖析之簡(jiǎn)單實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2021-09-09淺談vue中g(shù)et請(qǐng)求解決傳輸數(shù)據(jù)是數(shù)組格式的問題
這篇文章主要介紹了淺談vue中g(shù)et請(qǐng)求解決傳輸數(shù)據(jù)是數(shù)組格式的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08