事件的防抖和节流

防抖和节流的本质

都是闭包的形式存在的.

他们经过对事件的回调函数进行包裹、以保存自由变量的形式来缓存时间信息，最后使用 setTimeout 来控制事件的触发频率。

 

节流：第一我的说了算

节流（Throttle）的中心思想在于：在某段时间内不过你触发了多少次，我都只认第一次，而且在计时结束时给出响应。

/** * 函数节流 * 做用：一段时间内的屡次操做，只按照第一次触发开始计算，并在计时结束时给予响应。 * 场景：如输入搜索功能 * @param fn 须要进行节流操做的事件函数 * @param interval 间隔时间 * @returns {Function} */ function throttle(fn, interval = 500) { let last = 0; return function (...args) { let now = +new Date(); if (now - last > interval) { last = now; fn.call(this, args); } }; } /** * 步骤 * 接受一个函数，和一个触发间隔时间，时间默认是 500ms * 默认赋值为0 * 将多个参数解构为一个参数数组 * 记录本次触发回调的时间 * 判断上次触发的时间和本次之间的间隔是否大于咱们设定的阈值 * 将本次触发的时间赋值给last，用于下次判断 * 使用call调用传入的回调函数，并传入参数 * */

使用：在 onScorll 中使用节流

// 使用 throttle 来包装 scorll 的回调函数，设置间隔时间为1s const better_scorll = throttle(() => { console.log("触发了滚动事件"); }, 1000); document.addEventListenner("scorll", better_scorll); // 1s内，不管触发多少次，都只从第一次触发以后的1s后给出响应。

 

防抖：最后一我的说了算

防抖的中心思想在于：我会等你到底。在某段时间内，无论你触发了多少次回调，我都只认最后一次

/** * 函数防抖 * 做用：一段时间内的屡次操做，只执行最后一次。 * 场景：如点击登陆/注册/支付等按钮时 * @param fn 须要进行防抖操做的事件函数 * @param delay 延迟时间 * @returns {Function} */ function debounce(fn, delay = 500) { let timer = null; return function (...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => { fn.call(this, args); }, delay); }; } /** * 接受一个函数，和一个触发间隔时间，时间默认是 500ms * 定时器 id 默认赋值为null * 将多个参数解构为一个参数数组 * 判断timer是否存在，如存在就取消定时器 * 而后建立一个新的定时器，并将id赋值给timer * 而后若是再次点击重复上面的操做，一直到delay时间内没点时，定时器执行 * 执行时：使用call调用传入的回调函数，并传入参数 * */

使用：在 onScorll 中使用防抖

// 用debounce来包装scroll的回调 const better_scroll = debounce(() => console.log("触发了滚动事件"), 1000); document.addEventListener("scroll", better_scroll);

http://www.ssnd.com.cn 化妆品OEM代加工

用 Throttle 来优化 Debounce

debounce 的问题是它太有耐心了，试想，若是用户的操做十分频繁————他每次都不等 debounce 设置的 delay 的时间结束就进行下一次操做，因而每次 debounce 都会为用户从新生成定时器，回调函数被延迟了一次又一次，用户迟迟得不到响应，用户也会对这个页面产生“页面卡死”了的观感。

为了不弄巧成拙，咱们须要借力 Throttle 的思想，打造一个“有底线”的 debounce ，等你能够，但我有个人原则：delay 时间内，我能够为你从新生成定时器，可是只要 delay 时间一到，我就必须给用户一个响应。

这种 Throttle 和 debounce 合体的思想，已经被不少成熟的前端库应用到他们的增强版 throttle 函数中了。

/** * 增强版节流函数 * 做用：delay时间内的屡次操做将会从新生成定时器，但只要delay时间一到就执行一次。 * 场景：如点击登陆/注册/支付等按钮时 * @param fn 须要进行防抖操做的事件函数 * @param delay 延迟时间 * @returns {Function} */ function throttle(fn, delay = 500) { let last = 0; let timer = null; return function (...args) { let now = +new Date(); if (now - last < delay) { // 若是间隔时间小于咱们设定的阈值，则从新生成一个定时器 if (timer) clearTimeout(timer); timer = setTimeout(() => { last = now; fn.call(this, args); }, delay); } else { // 若是 间隔时间大于设定的阈值，就执行一次。 last = now; fn.call(this, args); } }; } /** * 接受一个函数和延迟时间，延迟时间默认是500ms * 定义一个开始执行的时间戳和定时器id，赋予默认值 * 返回一个函数，并将参数转为数组。 * 函数内，拿到当前的时间戳 * 判断，是否小于间隔时间： * 小于：则清楚定时器，而后从新生成定时器。定时器内直接赋值,而后call函数， * 大于：直接赋值,而后call函数， */

使用：在 onScorll 中使用增强版 throttle

// 用throttle来包装scroll的回调 const better_scroll = throttle(() => console.log("触发了滚动事件"), 1000); document.addEventListener("scroll", better_scroll);