如何理解Js事件的防抖与节流？

新钛云服已为您服务1228天

在平时的编码过程中，当绐浏览器注册一个时间，经常会遇到一些执行次数非常频繁的事件，如scroll,resize等，事件频繁的执行会导致浏览器进行大量的计算而引发页面卡顿假死的情况，为些我们需要通过一些手段来解决这个问题，所以就有了防抖和节流这两个技术。

事件节流 throttle

是指在某段时间内，不管你触发了多少次回调事件，我都只认第一次，并在计时结束时给予响应，至于后面你再触发多少次回调我都不会予以回应。代码实现如下:

// fn执行的函数, interval是时间间隔的阈值， 意为多久后执行，单位毫秒
function throttle(fn, interval) {
  // 上一次触发回调的时间
  let last = 0
  
  return function () {
      let context = this
      let args = arguments
      let now = +new Date()
      
      // 判断上次触发的时间和本次触发的时间差是否小于设置的间隔时间
      if (now - last >= interval) {
      // 如果时间间隔大于我们设定的时间间隔阈值，则执行回调
          last = now;
          fn.apply(context, args);
      }
    }
}
// 绐scroll事件增加节流
const newScroll = throttle(() => console.log('滚动了'), 1000)
document.addEventListener('scroll', newScroll)

事件防抖Debounce

与事件节流怡好相反，事件防抖只认最后一次，不管你前面触发了多少次我都不管，我只执行你最后一次触发事件的回调，代码实现如下：

// fn执行的函数, delay是延迟多久执行的时间， 意为多久后才触发事件，单位毫秒
function debounce(fn, delay) {
  let timer = null
  return function () {
    let context = this
    let args = arguments
    // 每次事件被触发时，都去清除之前的旧定时器
    if(timer) {
        clearTimeout(timer)
    }
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}
const newScroll = debounce(() => console.log('滚动了'), 1000)
document.addEventListener('scroll', newScroll)

函数防抖的应用场景

连续的事件，只需触发一次回调的场景有：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求

• 手机号、邮箱验证输入检测

• 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

函数节流的应用场景

间隔一段时间执行一次回调的场景有：

• 滚动加载，加载更多或滚到底部监听

• 百度搜索框，搜索联想功能

• 高频点击提交，表单重复提交

了解新钛云服

新钛云服荣膺第四届FMCG零售消费品行业CIO年会「年度数字化服务最值得信赖品牌奖」

新钛云服三周岁，公司月营收超600万元，定下百年新钛的发展目标

当IPFS遇见云服务|新钛云服与冰河分布式实验室达成战略协议

新钛云服正式获批工信部ISP/IDC(含互联网资源协作)牌照

深耕专业，矗立鳌头，新钛云服获千万Pre-A轮融资

新钛云服，打造最专业的Cloud MSP+，做企业业务和云之间的桥梁

新钛云服一周年，完成两轮融资，服务五十多家客户

上海某仓储物流电子商务公司混合云解决方案

往期技术干货

Kubernetes扩容到7,500节点的历程

低代码开发，全民开发，淘汰职业程序员！

国内主流公有云VPC使用对比及总结

万字长文：云架构设计原则|附PDF下载

刚刚，OpenStack 第 19 个版本来了，附28项特性详细解读！

Ceph OSD故障排除|万字经验总结

七个用于Docker和Kubernetes防护的安全工具

运维人的终身成长，从清单管理开始|万字长文！

OpenStack与ZStack深度对比：架构、部署、计算存储与网络、运维监控等

什么是云原生？

IT混合云战略：是什么、为什么，如何构建？

点????分享

戳????在看