js防抖和节流的深入讲解_javascript技巧_脚本之家

来源:http://www.chinese-glasses.com 作者:Web前端 人气:118 发布时间:2020-03-14
摘要:时间: 2019-12-06阅读: 105标签: 防抖 前言: 防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必

时间: 2019-12-06阅读: 105标签: 防抖

前言:

防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。(信我,你看完肯定就懂了)

我们在做页面事件绑定的时候,经常要进行节流处理,比如鼠标异步点击,去执行一个异步请求时,需要让它在上一次没执行时不能再点击,又或者绑定滚动事件,这种持续触发进行dom判断的时候,就要按一定频率的执行。

从滚动条监听的例子说起

本文主要给大家介绍了关于js防抖和节流的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧

先说一个常见的功能,很多网站会提供这么一个按钮:用于返回顶部。

0. 引入

这个按钮只会在滚动到距离顶部一定位置之后才出现,那么我们现在抽象出这个功能需求--监听浏览器滚动事件,返回当前滚条与顶部的距离这个需求很简单,直接写:

模拟在输入框输入后做ajax查询请求,没有加入防抖和节流的效果,这里附上完整可执行代码:

function showTop () { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log('滚动条位置:' + scrollTop);}window.onscroll = showTop
 没有防抖   window.onload = function () { //模拟ajax请求 function ajax { console.log('ajax request ' + content) } let inputNormal = document.getElementById; inputNormal.addEventListener { ajax }   1.没有防抖的输入:  

但是!

效果:在输入框里输入一个,就会触发一次“ajax请求”。

在运行的时候会发现存在一个问题:这个函数的默认执行频率,太!高!了!。高到什么程度呢?以chrome为例,我们可以点击选中一个页面的滚动条,然后点击一次键盘的【向下方向键】,会发现函数执行了8-9次

缺点:浪费请求资源,可以加入防抖和节流来优化一下。

然而实际上我们并不需要如此高频的反馈,毕竟浏览器的性能是有限的,不应该浪费在这里,所以接着讨论如何优化这种场景。

本文会分别介绍什么是防抖和节流,它们的应用场景,和实现方式。防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题,比如触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。但二者应对的业务需求不一样,所以实现的原理也不一样,下面具体来看看吧。

防抖(debounce)

1. 防抖

基于上述场景,首先提出第一种思路:在第一次触发事件时,不立即执行函数,而是给出一个期限值比如200ms,然后:

1.1 什么是防抖

如果在200ms内没有再次触发滚动事件,那么就执行函数如果在200ms内再次触发滚动事件,那么当前的计时取消,重新开始计时

在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,则重新计时。

效果:如果短时间内大量触发同一事件,只会执行一次函数。

1.2 应用场景

实现:既然前面都提到了计时,那实现的关键就在于setTimeOut这个函数,由于还需要一个变量来保存计时,考虑维护全局纯净,可以借助闭包来实现:

用户在输入框中连续输入一串字符后,只会在输入完后去执行最后一次的查询ajax请求,这样可以有效减少请求次数,节约请求资源;

/** fn [function] 需要防抖的函数* delay [number] 毫秒,防抖期限值*/function debounce(fn,delay){ let timer = null //借助闭包 return function() { if(timer){ clearTimeout(timer) //进入该分支语句,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时 timer = setTimeOut(fn,delay) }else{ timer = setTimeOut(fn,delay) // 进入该分支说明当前并没有在计时,那么就开始一个计时 } }}

window的resize、scroll事件,不断地调整浏览器的窗口大小、或者滚动时会触发对应事件,防抖让其只触发一次;

当然 上述代码是为了贴合思路,方便理解(这么贴心不给个赞咩?),写完会发现其实time = setTimeOut(fn,delay)是一定会执行的,所以可以稍微简化下:

1.3 实现

/*****************************简化后的分割线 ******************************/function debounce(fn,delay){ let timer = null //借助闭包 return function() { if(timer){ clearTimeout(timer) } timer = setTimeout(fn,delay) // 简化写法 }}// 然后是旧代码function showTop () { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log('滚动条位置:' + scrollTop);}window.onscroll = debounce(showTop,1000) // 为了方便观察效果我们取个大点的间断值,实际使用根据需要来配置

还是上述列子,这里加入防抖来优化一下,完整代码如下:

此时会发现,必须在停止滚动1秒以后,才会打印出滚动条位置。

 加入防抖   window.onload = function () { //模拟ajax请求 function ajax { console.log('ajax request ' + content) } function debounce { return function  { //获取函数的作用域和变量 let that = this let _args = args //每次事件被触发,都会清除当前的timeer,然后重写设置超时调用 clearTimeout fun.id = setTimeout { fun.call }, delay) } } let inputDebounce = document.getElementById let debounceAjax = debounce inputDebounce.addEventListener { debounceAjax }   2.加入防抖后的输入:  

到这里,已经把防抖实现了,现在给出定义:

代码说明:

对于短时间内连续触发的事件(上面的滚动事件),防抖的含义就是让某个时间期限(如上面的1000毫秒)内,事件处理函数只执行一次。节流(throttle)

1.每一次事件被触发,都会清除当前的 timer 然后重新设置超时调用,即重新计时。 这就会导致每一次高频事件都会取消前一次的超时调用,导致事件处理程序不能被触发;

继续思考,使用上面的防抖方案来处理问题的结果是:

2.只有当高频事件停止,最后一次事件触发的超时调用才能在delay时间后执行;

如果在限定时间段内,不断触发滚动事件(比如某个用户闲着无聊,按住滚动不断的拖来拖去),只要不停止触发,理论上就永远不会输出当前距离顶部的距离。

效果:

本文由10bet发布于Web前端,转载请注明出处:js防抖和节流的深入讲解_javascript技巧_脚本之家

关键词:

最火资讯