防抖节流函数

js实现防抖节流

防抖是触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。适用于可以多次触发但触发只生效最后一次的场景。

节流是高频事件触发，但在n秒内只会执行一次(一般是第一次)，如果n秒内触发多次函数，只有一次生效，节流会稀释函数的执行频率。 

export function debounce(fn, duration = 100) {
    let timer = null
    return (...args) => {
        // ...args 是函数传递的参数 比如下面的$event, '参数2'
        if (timer) {
            // 如果存在定时器就清除掉定时器
            clearTimeout(timer) // 清除定时器
        }
        timer = setTimeout(() => {
            fn(...args); // 若在定时器延迟时间内没有再次触发就执行函数
        }, duration)
    }
} // 防抖
export function throttle(fn, duration = 100) {
    let target = true; 
    return (...arg) => {
        if(target) { //如果阀门已经打开，就继续往下
			target = false;//关闭阀门
			setTimeout(()=> {
				fn(...arg);//定时器结束后执行
				target = true;//执行完成后打开阀门
			}, duration)
		}
        // 刚开始target为true，然后将target重置为false,进入了定时器，
        // 在定时器的时间期限之后，才会将target重置为true,target为true之后，之后的点击才会生效
        // 在定时器的延迟时间期限内，target还没有重置为true，会一直进入return，就实现了在N秒内多次点击只会执行一次的效果
    }
} // 节流

用法：

<button class="primary" @click="getUserInfo($event, '参数2')">防抖</button>
<button class="primary" @click="getUserInfo2($event, '参数2')">节流</button>

    import { debounce, throttle } from "./util/utils";

    getUserInfo: debounce(() => {
      console.log(`测试防抖`);
    }, 1000),
    /*() => {console.log(`测试防抖`)} 相当于定时器中的fn()  */
    getUserInfo2: throttle(() => {
      console.log(`测试节流`);
    }, 1000),  // 我这里是把防抖节流函数写在了公共的js文件中，去引用的