vue中使用閉包失效怎么解決

這篇文章主要講解了“vue中使用閉包失效怎么解決”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue中使用閉包失效怎么解決”吧！

1. 出現(xiàn)問題

防抖/節(jié)流使用無效，（例如防抖，按鈕點(diǎn)擊多次依舊執(zhí)行多次）
----> 查看是閉包無效，定義的局部變量依舊為初值
----> 沒有相應(yīng)清除定時(shí)器

  <el-button @click="btn1">按 鈕1</el-button>
  <el-button @click="debounce(btn2)">按 鈕2</el-button>
</template>
<script setup lang="ts">
// 以下方法調(diào)用不生效
const btn1 = () => {
  debounce(() => {
    console.log('點(diǎn)擊了')
  }, 1000)()
}
const btn2 = () => {
  console.log('點(diǎn)擊了');
}
</script>

2. 問題原因

直接調(diào)用了防抖函數(shù)

原因：這個(gè)和vue的事件綁定原理有關(guān)。如果直接在函數(shù)體內(nèi)部使用的話，結(jié)果就是，一個(gè)匿名的立即執(zhí)行函數(shù)來進(jìn)行執(zhí)行。由于每次觸發(fā)點(diǎn)擊事件都會(huì)返回一個(gè)新的匿名函數(shù)， 就會(huì)生成一個(gè)新的函數(shù)執(zhí)行期上下文(稱之為執(zhí)行棧)，所以就會(huì)防抖/節(jié)流就會(huì)失效

3. 解決辦法

<template>
  <el-button @click="btn">按 鈕1</el-button>
</template>
<script setup lang="ts">
const btn = debounce(function() {
  console.log('點(diǎn)擊了');
},500)
</script>

4. 防抖節(jié)流函數(shù)

type DebouncedFn<T extends (...args: any[]) => any> = (this: ThisParameterType<T>, ...args: Parameters<T>) => void;
type ThrottledFn<T extends (...args: any[]) => any> = (this: ThisParameterType<T>, ...args: Parameters<T>) => void;
function debounce<T extends (...args: any[]) => any>(fn: T, delay: number, immediate = false): DebouncedFn<T> {
  let timer: number | null = null;
  return function(this: ThisParameterType<T>, ...args: Parameters<T>) {
    // if (timer !== null) clearTimeout(timer);
    timer && clearTimeout(timer)
    if (immediate) {
      const callNow = !timer;
      timer = setTimeout(() => {
        timer = null;
      }, delay);
      callNow && fn.apply(this, args);
    } else {
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    }
  };
}
function throttle<T extends (...args: any[]) => any>(fn: T, delay: number, immediate = false): ThrottledFn<T> {
  let lastCall = 0;
  return function(this: ThisParameterType<T>, ...args: Parameters<T>) {
    const now = new Date().getTime();
    // immediate 不為 true 時(shí), 不立即執(zhí)行
    lastCall === 0 && !immediate && (lastCall = now)
    const diff = now - lastCall;
    if (diff >= delay) {
      lastCall = now;
      fn.apply(this, args);
    }
  };
}
export {
  debounce,
  throttle
}

感謝各位的閱讀，以上就是“vue中使用閉包失效怎么解決”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)vue中使用閉包失效怎么解決這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！