事件的防抖和节流

事件的防抖和节流

防抖和节流函数是我们经常用到的函数,在实际的开发过程中,如 scroll、resize、click、键盘等事件很容易被多次触发,频繁的触发回调会导致页面卡顿和抖动,为了避免这种情况,需要使用节流和防抖的方法来减少无用的操作和网络请求,也是面试中经常遇到的问题,需要牢牢掌握。

防抖和节流的本质

都是闭包的形式存在的.

他们通过对事件的回调函数进行包裹、以保存自由变量的形式来缓存时间信息,最后使用 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);

用 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);

九旬的博客
关注我,每周输出一篇前端技术文章, 博客地址:[链接]

关注我,每周输出一篇前端技术文章,

927 声望
1.2k 粉丝
0 条评论
推荐阅读
前端图片压缩方案
先通过 js 中 img 构造函数,实例化 img 对象,后将图片的路径给转移到中,再建立一个 canvas 画布,后对画布进行各方面的数值的设置。

九旬1阅读 227

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 7.9k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

关注我,每周输出一篇前端技术文章,

927 声望
1.2k 粉丝
宣传栏