首先清楚防抖节流的概念
防抖: 高频率事件在操作结束只执行最后一次
节流: 高频率事件某一段时间执行一次
防抖实现
function debounce(fn, time) { let timer return function(){ var _that = this var arg = arguments // 高频率事件会在某个时间段内清除定时器,保证只执行最后一个 if (timer) clearTimeout(timer) timer = setTimeout(() => { fn.call(_that, arg) }, time) } }
节流实现
function throttle(fn, time) { var timer return function() { var _this = this var arg = arguments if (!timer) { setTimeout(() => { timer = null fn.call(_that, arg) }, time) } } }
应用场景
函数防抖的应用场景
连续的事件,只需触发一次回调的场景有:
1.搜索框搜索输入。只需用户最后一次输入完,再发送请求。
2.手机号、邮箱验证输入检测。
3.窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。
函数节流的应用场景
间隔一段时间执行一次回调的场景有:
1.滚动加载,加载更多或滚到底部监听。
2.高频点击提交,表单重复提交
参考链接:https://blog.csdn.net/w1418899532/article/details/98358491