欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在Vue中使用防抖與節(jié)流,及this指向的問題

 更新時(shí)間:2022年01月23日 15:15:20   作者:IMP_L  
這篇文章主要介紹了在Vue中使用防抖與節(jié)流,及this指向的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

使用防抖與節(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)攔截器用法及說明

    這篇文章主要介紹了Vue中的請(qǐng)求攔截器和響應(yīng)攔截器用法及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • 詳解vue微信網(wǎng)頁授權(quán)最終解決方案

    詳解vue微信網(wǎng)頁授權(quán)最終解決方案

    這篇文章主要介紹了 詳解vue微信網(wǎng)頁授權(quán)最終解決方案,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-06-06
  • vue3中vue-meta的使用方法解析

    vue3中vue-meta的使用方法解析

    這篇文章主要介紹了vue3中vue-meta的使用方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • vue新建環(huán)境變量以及網(wǎng)絡(luò)請(qǐng)求工具axios的二次封裝詳解

    vue新建環(huán)境變量以及網(wǎng)絡(luò)請(qǐng)求工具axios的二次封裝詳解

    這篇文章主要為大家介紹了vue新建環(huán)境變量以及網(wǎng)絡(luò)請(qǐng)求工具axios的二次封裝詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • 在vue中通過axios異步使用echarts的方法

    在vue中通過axios異步使用echarts的方法

    本篇文章主要介紹了在vue中通過axios異步使用echarts的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-01-01
  • Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡(jiǎn)單方法

    Vue中使用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-12
  • vue引入高德地圖并繪制點(diǎn)線面的方法

    vue引入高德地圖并繪制點(diǎn)線面的方法

    這篇文章主要介紹了vue引入高德地圖并繪制點(diǎn)線面的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
    2024-03-03
  • vue3源碼剖析之簡(jiǎn)單實(shí)現(xiàn)方法

    vue3源碼剖析之簡(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ù)組格式的問題

    這篇文章主要介紹了淺談vue中g(shù)et請(qǐng)求解決傳輸數(shù)據(jù)是數(shù)組格式的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue-cli4如何打包靜態(tài)資源到指定目錄

    vue-cli4如何打包靜態(tài)資源到指定目錄

    這篇文章主要介紹了vue-cli4打包靜態(tài)資源到指定目錄方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09

最新評(píng)論