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

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

1. 出現問題

防抖/節流使用無效，（例如防抖，按鈕點擊多次依舊執行多次）
----> 查看是閉包無效，定義的局部變量依舊為初值
----> 沒有相應清除定時器

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

2. 問題原因

直接調用了防抖函數

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

3. 解決辦法

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

4. 防抖節流函數

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 時, 不立即執行
    lastCall === 0 && !immediate && (lastCall = now)
    const diff = now - lastCall;
    if (diff >= delay) {
      lastCall = now;
      fn.apply(this, args);
    }
  };
}
export {
  debounce,
  throttle
}

感謝各位的閱讀，以上就是“vue中使用閉包失效怎么解決”的內容了，經過本文的學習后，相信大家對vue中使用閉包失效怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！