vue中使用闭包(防抖和节流)失效问题

  <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>

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

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
}