vue 防抖和节流函数封装

### Vue 中防抖和节流函数的封装

在前端开发中，尤其是使用 Vue 这样的框架时，处理频繁触发事件（如窗口调整大小、滚动等）是非常常见的需求。为了优化性能并减少不必要的计算或请求，可以采用防抖（debounce）和节流（throttle）技术。

#### 防抖 (Debounce)

当连续触发某个动作，在最后一次触发后的指定时间内如果没有再次触发，则执行该动作；如果在这段时间内又触发了此动作，则重新计时。这种方式适用于输入框自动补全等功能场景下[^1]。

function debounce(func, wait) {
    let timeout;
    return (...args) => {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    }
}

#### 节流 (Throttle)

规定在一个时间范围内只允许一次操作生效。比如每秒最多只能发送一次Ajax请求获取数据，即使这期间有更多次的操作也不会被理会直到下一个周期到来为止。这对于监听浏览器窗口尺寸变化特别有用[^2]。

function throttle(fn, delay) {
    var lastTime = 0;
    return function(...args){
        const now = new Date().getTime();
        if(now - lastTime >= delay){
            fn.apply(this,args);
            lastTime = now;
        }
    };
}

#### 将其应用于 Vue 组件的方法定义里：

通过组合 `methods` 和自定义指令来实现更灵活的应用方式[^4]。

<template>
  <div @scroll="handleScroll">
      <!-- content -->
  </div>
</template>

<script setup>
import { ref } from 'vue';

const handleScroll = () => {
    console.log('scrolled');
};

// 使用防抖
const debouncedHandleScroll = debounce(handleScroll, 300);

// 或者使用节流
const throttledHandleScroll = throttle(handleScroll, 500);
</script>