vue中使用闭包（例如防抖和节流）失效问题（直接调用）

原创已于 2023-02-09 17:45:38 修改 · 2.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-02-08 15:20:29 首次发布

vue 同时被 2 个专栏收录

76 篇文章

订阅专栏

Javascript

52 篇文章

订阅专栏

文章讨论了在Vue应用中防抖和节流函数失效的问题，原因是直接在函数体内调用导致每次点击事件产生新的执行栈。解决方法是将防抖或节流函数外层绑定到事件处理函数。此外，文章提供了防抖和节流的函数实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

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
}