摘要:个人博客原文地址背景我们在开发的过程中会经常使用如等事件,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能。
个人博客原文地址
背景我们在开发的过程中会经常使用如scroll、resize、touchmove等事件,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能。
因此针对这类事件要进行节流或者防抖处理
节流的意思是,在规定的时间内只会触发一次函数,如我们设置函数500ms触发一次,之后你无论你触发了多少次函数,在这个时间内也只会有一次执行效果
先来看一个例子
https://codepen.io/wclimb/pen...
我们看到使用了节流的在1000ms内只触发了一次,而没有使用节流的则频繁触发了调用的函数
接下来看看代码实现
v1 第一次不触发,不传参实现
function throttle(fn,interval){ var timer; return function(){ if(timer){ return } timer = setTimeout(() => { clearTimeout(timer) timer = null fn() }, interval || 1000); } }
效果是实现了,但是我在尝试在执行函数里console.log(this),结果发现this指向的是window,而且还发现我们不能传递参数,下面就来改进一下
v2 第一次触发函数,接收参数
function throttle(fn,interval){ var timer, isFirst = true; return function(){ var args = arguments, that = this; if(isFirst){ fn.apply(that,args) return isFirst = false } if(timer){ return } timer = setTimeout(() => { clearTimeout(timer) timer = null fn.apply(that,args) }, interval || 1000); } }防抖
防抖的意思是无论你触发多少次函数,只会触发最后一次函数。最常用的就是在表单提交的时候,用户可能会一段时间内点击很多次,这个时候可以增加防抖处理,我们只需要最后一次触发的事件
先来看一个例子
https://codepen.io/wclimb/pen...
我们看到使用了防抖的方框,无论你在里面触发了多少次函数,都只会触发最后的那一次函数,而没有使用防抖的则频繁触发了调用的函数
v1 第一次不触发函数
function debounce(fn,interval){ var timer; return function(){ var args = arguments, that = this; if(timer){ clearTimeout(timer) timer = null } timer = setTimeout(() => { fn.apply(null,args) }, interval || 1000); } }
上面这段代码仍然可以正常执行,但是我们并没有指定他的this
v2 第一次就触发函数
function debounce(fn,interval){ var timer, isFirst = true, can = false; return function(){ var args = arguments, that = this; if(timer){ clearTimeout(timer) timer = null } if(isFirst){ fn.apply(that,args) isFirst = false setTimeout(() => { can = true }, interval || 1000); }else if(can){ timer = setTimeout(() => { fn.apply(null,args) }, interval || 1000); } } }
如有雷同,纯属抄我(开玩笑)
如有错误,还望指正,仅供参考
GitHub:wclimb
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/96456.html
摘要:您的支持是我最大的动力,我会保证提供高质与清晰的文章与您共同成长。一些文章中的与上面所谈到的设置类似。防抖防抖技术允许我们捆绑多个连续调用成为单一的一次调用。防抖的应用这个简单的举个 欢迎star和watch我的github issue blog,欢迎加入讨论。您的支持是我最大的动力,我会保证提供高质与清晰的文章与您共同成长。 节流[throttle]与防抖[debounce]在前...
摘要:首先重置防抖函数最后调用时间,然后去触发一个定时器,保证后接下来的执行。这就避免了手动管理定时器。 之前遇到过一个场景,页面上有几个d3.js绘制的图形。如果调整浏览器可视区大小,会引发图形重绘。当图中的节点比较多的时候,页面会显得异常卡顿。为了限制类似于这种短时间内高频率触发的情况,我们可以使用防抖函数。 实际开发过程中,这样的情况其实很多,比如: 页面的scroll事件 ...
摘要:节流分流,与防抖去抖实现原理相似。本文主要讨论节流,镜像文章防抖理解,实践与实现。分开讨论防抖和节流,主要是为了让一些还不太了解节流防抖的读者能够有针对性地,逐一掌握它们。上方为未节流模式,每一次触发都会绘制一个圆点。 showImg(https://segmentfault.com/img/bVbqMwN?w=1280&h=720); 节流(分流),与防抖(去抖)实现原理相似。本文主...
阅读 2158·2021-11-18 10:02
阅读 3260·2021-11-11 16:55
阅读 2674·2021-09-14 18:02
阅读 2408·2021-09-04 16:41
阅读 2020·2021-09-04 16:40
阅读 1097·2019-08-30 15:56
阅读 2190·2019-08-30 15:54
阅读 3144·2019-08-30 14:15