为了完整阅读体验,欢迎移步到我的。
防抖(去抖),以及节流(分流)在日常开发中可能用的不多,但在特定场景,却十分有用。本文主要讨论防抖,镜像文章:。分开讨论防抖和节流,主要是为了让一些还不太了解防抖节流的读者能够有针对性地,逐一掌握它们。
防抖有两种模式(容易让人迷惑):延时执行和直接执行。后续详细讨论。
防抖还有一个关键点是如果用代码实现。本文以循序渐进地方式,先以实现一个简单案例为例,绘制流程图,再根据流程图逻辑编写防抖功能代码。
以日常开发中常用的搜索按钮为例,若用户点击一次搜索按钮后,不小心“手抖”很快又点了一次按钮,防抖可以规避第二次甚至更多次搜索。
第一个搜索按钮未做任何防抖处理。
搜索按钮a为第一种防抖模式:延时执行。若用户连续快速点击多次,只有最后一次点击结束,延时一段时间后才执行搜索。
搜索按钮b为第二种防抖模式:直接执行。若用户连续快速点击多次,只有第一次点击会执行搜索。
结合上方案例,防抖可以理解为:多次触发事件后,事件处理函数只执行一次。
而防抖的两种模式可以根据实际使用场景分别应用。
在搜索框中实时键入文本搜索
防止频繁点击搜索按钮触发搜索请求
点击查看案例
接下来我们通过一个案例梳理实现防抖的思路。
假设我们要实现本文第一个案例中搜索按钮a的功能。首先整理需求:
实现的方法有两种,推荐第一种,用计时器(settimeout)简化代码,将重心放在实现防抖的逻辑上。
方法一核心参数:
绘制方法一的流程图:
根据流程图思路实现方法一的防抖代码:
function debounce( func, wait = 0 ) { let timer function debounced( ...args ) { const self = this if ( timer == null ) { addtimer() return } if ( timer != null ) { cleartimer() addtimer() return } function addtimer() { timer = settimeout( () => { invokefunc() cleartimer() }, wait ) } function invokefunc() { func.apply( self, args ) } } return debounced function cleartimer() { cleartimeout( timer ) timer = null } }
方法二核心参数:
绘制方法二的流程图:
根据流程图实现方法二的防抖代码:
function debounce( func, wait = 0 ) { // earliest time when func can be invoked let earliest function debounced( ...args ) { const self = this if ( typeof earliest === 'undefined' ) { setearliset() } if ( typeof earliest !== 'undefined' ) { if ( now() >= earliest ) { invokefun() } else { setearliset() } } function setearliset() { earliest = now() + wait } function invokefun() { func.apply( self, args ) } } return debounced function now() { return +new date() } }
同样,我们可以使用类似方法实现搜索按钮b的功能。
需求描述:
核心参数:
function debounce( func, wait = 0 ) { let timer function debounced( ...args ) { const self = this timer == null && invokefunc() timer != null && cleartimer() timer = settimeout( cleartimer, wait ) function invokefunc() { func.apply( self, args ) } } return debounced function cleartimer() { cleartimeout( timer ) timer = null } }
接下来我们使用刚才编写的debounce函数来测试第一个案例
点击查看案例
防抖是一个高阶函数,能够将多个事件函数合并为一个,在“调整window尺寸”,“在搜索框中实时搜索键入文本”, “滚动滚动条”和“防止搜索按钮频繁点击触发多余请求”等案例中,十分有用。
如果本文帮助到了你,我也十分荣幸, 欢迎点赞和收藏。如果有任何疑问或者建议,都欢迎在下方评论区提出。期待你的真知灼见。
如对本文有疑问, 点击进行留言回复!!
MFC的静态库.lib、动态库.dll(包含引入库.lib)以及Unicode库示例
CTF 刷题记录(一) 白云新闻搜索(手动与自动化SQL注入)
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论