前端面试之防抖函数 _防抖函数

背景防抖函数在各个互联网大厂的面试中，出现的频率是非常高的，本人在面试某鹅厂的时候也正好遇见过。
那么何为防抖呢？
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
举个简单的例子，当用户连续多次点击某个按钮时，而这个按钮每点击一次就会发送一个请求。那么当用户连续多次点击按钮的时候，那岂不是也需要多次发送请求，直接产生的后果就是浪费资源，性能降低，增加服务器压力。那么如何解决这个问题呢？如果能够在一定时间内，只能发送一次请求就可以解决这个问题了。
防抖函数下面就是我们平时最常见的防抖函数了，非常简单，主要使用了setTimeout定时器，以及使用闭包，用于对防抖函数debounce中的timeout参数持续访问。
/** * @desc 函数防抖 * @param func 函数 * @param wait 延迟执行毫秒数 * @param immediate true 表立即执行(前沿触发)，false 表非立即执行（后沿触发） */function debounce(func,wait,immediate) {let timeout;return function () {let context = this;let args = arguments;if (timeout) clearTimeout(timeout); // timeout是定时器ID，只有初始化状态下第一次触发的时候才不会执行；后续在周期内触发db函数会清除定时器，避免在周期内初始化timeout导致事件函数被执行if (immediate) {var callNow = !timeout;timeout = setTimeout(() => {timeout = null; // 如果周期内db函数未触发，则重新初始化timeout}, wait)if (callNow) func.Apply(context, args) // 初始化状态下，立即执行事件函数}else {timeout = setTimeout(function(){ // 在周期内db函数被触发会更新定时器，延迟事件函数的执行func.apply(context, args)}, wait);}}}使用场景防抖函数多使用于如下的一些频繁触发的事件：