vue中使用防抖和节流

一、防抖

n秒后执行该事件，如果n秒内被重复触发，则重新计时 。

总结：多次点击，最后一次执行。

二、节流

n秒内运行一次，如果n秒内重复触发，只生效一次。

总结：间隔时间内执行一次。

二、使用步骤

1.封装js文件

代码如下（示例）：

//封装防抖
const debounce = (fn, delay) => {
    let timer = null;
    return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    };
};

//封装节流
const throttle = (fn, delay) => {
    let flag = true;
    return function () {
        if (!flag) return
        flag = false;
        setTimeout(() => {
            fn.apply(this, arguments)
            flag = true;
        }, delay);
    }
};

export {
    throttle,
    debounce
};

2、组件中使用

代码如下（示例）：

<script setup>
import { debounce, throttle } from '../untill/index'
let handleDebounce = () => {
    console.log('防抖执行')
}
let handleThrottle = () => {
    console.log('节流执行')
}
// 执行防抖
let db_debounce = debounce(handleDebounce, 2000)
// 执行节流
let db_throttle = throttle(handleThrottle, 2000)
</script>

<template>
    <button @click="db_debounce">防抖</button>
    <button @click="db_throttle">节流</button>
</template>