简单介绍节流与防抖

节流和防抖为了优化前端性能而生,所有的概念都是基于业务衍生而来的

本质都是节省开销,使得性能交互更加友好。比如http请求和DOM操作等绑定事件以及重排重绘等大的开销,防抖是只触发一次,节流是多久触发一次。

都是指定时间只能执行一次,只不过这个指定时间的==计算起点==不一样。记住这点就能分清节流和防抖了。

防抖:

计算起点:从最后一次触发监听事件开始计算。最后一次之前的触发,都会被舍弃掉(clearTimeout),重新计算时间

  • 搜索框,当用户不断输入值时,防抖可以极大优化ajax请求,而不是每输入一个就发起一次ajax请求
  • 触发window的 resize / scroll 事件,比如滚动加载更多
function debounce(fn, delay) {
  let timer = null
  return function () {
    // 每次触发事件的时候,都将原来的定时器给清除掉,重新计算时间
    clearTimeout(timer)
    timer = setTimeout(function () {
      fn.apply(this, arguments)
    }, delay)
  }
}

节流:

计算起点:从上一次监听事件执行或者最开始算起。

对一些频繁的操作,设置节流时间间隔,降低操作的触发频率,比如2s内的所有操作,在2s时执行一次。多余操作会被舍弃(clearTimeout),比如:

function throttle(fun, delay) {
  let last, timer
  return function () {
    let me = this
    let args = arguments
    let now = +new Date()

    // 当到达了设置的间隔时间的时候,即执行
    if (last && now < last + delay) {
      clearTimeout(timer)
      timer = setTimeout(function () {
        last = now
        fun.apply(me, args)
      }, delay)
    } else {
      last = now // 记录开始计时的时间
      fun.apply(me, args) // 首次执行
    }
  }
}

进阶:

当然,上述只是基本的节流和防抖,还是那句话,代码怎么写,完全看业务怎么需要了。比如防抖函数要求第一次触发的时候立即执行。

原文链接:segmentfault.com

上一篇:在H5中唤起APP,唤起失败进入APP下载页
下一篇:hornairs-snockets

相关推荐

  • 🔥插件开发如此简单!

    本文使用的WebpackQuicklyStarter快速搭建 Webpack4 本地学习环境。 建议多阅读 Webpack 文档《Writing a Plugin》章节,学习开发简单插件。

    3 个月前
  • 页面简单布局

    下面是一个简单的页面布局。注意发现页面的布局特点,注意使用居中,浮动等。 结果: image.png(/public/upload/2eebdd74298e13c7103ee3094697...

    2 个月前
  • 防抖(debounce)和节流(throttle)的学习总结

    防抖(debounce) 用户与网页进行交互时,经常出现根据页面的状态、数据向服务器请求、发送数据的场景,比如:根据用户的输入数据进行实时校验,下拉请求数据等等,如果用户操作过于频繁,页面状态、数...

    1 年前
  • 防抖(debounce)和节流(throttle)---解决事件频繁触发造成页面卡死

    连续触发(触发频率很高)的时间,不进行优化,会出现页面卡顿现象。 常见的需要优化的事件: 鼠标事件: mousemove(拖拽) mouseover(划过) ...

    1 年前
  • 防抖和节流的实现、区别与应用场景

    应用: 在我们开发过程中,会有一些用户操作,如滚动事件,输入事件等导致一直重复调用某函数,频率无限,使浏览器负担过重,导致页面卡顿。这时候就会用到防抖和节流来控制调用频率,减少浏览器负担。

    7 个月前
  • 防抖和节流的实现

    防抖(debounce) 防抖的作用是将多个连续的调用合并为一次调用。作用见参考资料1。 1. 两次调用的间隔小于,则视为连续的调用。 2. 如果距离上次调用已经过去了的时间,则说明该轮连续...

    2 年前
  • 防抖和节流(较全&可体验)

    (https://img.javascriptcn.com/3c2d27a3a2e77b5c149efb2cd4a1b942) 防抖(debounce) 概念 事件被触发经过单位时间(del...

    7 个月前
  • 防抖动处理和节流 小技巧

    1. 简单的防抖动处理,一秒内点击一次 2. 向服务器请求数据 点击按钮向后台请求数据 优化点: 另外一些防抖动的小技巧,请参考: http://blog.csdn.net/crys...

    2 年前
  • 防抖与节流(源码学习)

    最近自己撸了一个轮播图,在点击切换的时候,为了寻求更好的用户体验,引入了节流,在此记录对源码的学习过程 源码来源:underscore(https://github.com/jashkenas/und...

    2 年前
  • 闭包的简单理解

    主要分三部分说: 一、什么是闭包?二、闭包有什么好处?应用在哪里? 1、什么是闭包 第一个特点:可以是函数嵌套函数 第二个特点:内部函数可以引用外部函数的参数和变量 b变量都要被内部...

    2 年前

官方社区

扫码加入 JavaScript 社区