简单介绍节流与防抖

2019-10-10 admin

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

本质都是节省开销,使得性能交互更加友好。比如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) // 首次执行
    }
  }
}

进阶:

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

[转载]原文链接:https://segmentfault.com/a/1190000020638747

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77055.html

文章标题:简单介绍节流与防抖

相关文章
最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta cha...
2017-03-21
性能与生态双突破 HTML5重现爆发曙光
走过早熟的WebAPP,也经历过概念性的“轻应用”,HTML5这个被视作移动互联网未来的技术标准,终于在2015年看到了爆发的曙光。1月 15日,搜狐发布基于HTML5的“手机搜狐网3.0,加上微信几天前开放HTML5接口,HTML5很可能...
2015-11-12
2015年预测:Web体验与以往的五大不同
在过去的一年,我们见证了Uber的崛起、Apple加入了可穿戴设备的竞赛中、以及诸如Facebook收购Whatapp这类大的并购事件。那么在2015年我们将看到哪些巨大的改变?这里列出了五个对未来的预测 更清洁、简单的内容 2013年...
2015-11-11
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
Ajax教程之Ajax介绍
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述...
2015-11-12
JavaScript深入之类数组对象与
类数组对象 所谓的类数组对象: 拥有一个 length 属性和若干索引属性的对象 举个例子: var array = [&#x27;name&#x27;, &#x27;age&#x27;, &#x27;sex&#x27;]; var ...
2017-05-27
纯JavaScript实现html转pdf的简单实例(推荐)
项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格、svg图片和样式。 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf。 咋不上天呢…… 查了一下,能够实现html转pdf的方法还...
2017-03-16
nodejs读写json文件的简单方法(必看)
nodejs 读json文件 var fs=reauire(&#x27;fs&#x27;); var file=&quot;d:\\0.json&quot;; var result=JSON.parse(fs.readFileSync( f...
2017-03-13
javascript数据结构与算法之检索算法
查找数据有2种方式,顺序查找和二分查找。顺序查找适用于元素随机排列的列表。二分查找适用于元素已排序的列表。二分查找效率更高,但是必须是已经排好序的列表元素集合。 一:顺序查找 顺序查找是从列表的第一个元素开始对列表元素逐个进行判断,直到找到...
2017-03-22
javascript实现的字符串与十六进制表示字符串相互转换方法
本文实例讲述了javascript实现的字符串与十六进制表示字符串相互转换方法。分享给大家供大家参考。具体如下: 之所以写这个,是因为发现SQL注入和XSS中经常利用十六进制表示的字符串,比如 SELECT CONCAT(0x68656c6...
2017-03-27
回到顶部