js的节流与防抖方法封装

简介

节流（Throttling）和 防抖（Debouncing） 是防止频繁触发函数执行的两种技术，它们的目标都是减少函数的执行次数。

区别

防抖（Debouncing） ：当用户停止触发事件后，经过一段时间后才执行函数。如果用户在设定的时间内再次触发事件，则重新开始计时。
节流（Throttling） ：确保一定时间内只触发一次函数。如果你设置了节流，那么在设定的时间内，无论用户触发了多少次操作，函数只会执行一次。

使用场景

防抖

1. 点击事件：避免用户多次点击触发
2. 输入框搜索： 用户输入完成后一段时间再去触发，减少请求，提高用户搜索体验
3. 窗口大小自适应： 在用户对窗口停止操作后，再去重新计算布局。

节流

1. 接口请求： 避免用户高频请求造成内存消耗，确保一定时间内只请求一次
2. 页面滚动： 一定时间内触发一次滚动事件，降低请求次数，提高页面性能。
3. 鼠标hover事件： 确保一定时间以内，执行一次鼠标经过时间， 降低请求，提高性能。

方法封装

1. 防抖函数

/***fun 要防抖的函数*delay 延迟的时间**/
const debounce = (fun, delay) => {let timer;return function (...args) {if (timer) {clearTimeout(timer)}timer = setTimeout(() => {fun.apply(this, args)}, delay)}
}

2. 节流函数

/***fun 要防抖的函数*delay 延迟的时间**/
const throttle = (fun, delay) =>  {//开始时间var timer;return function () {//判断timer是否有值（是否开启定时器）if (!timer) {timer = setTimeout(function () {//关闭定时器fun();//开启定时器timer = undefined;}, delay)}}     
}