时间:2021-05-18
函数防抖和节流都是对高频动作触发回调函数的一个优化,实现方式上有类似之处。先从使用场景做个区分。
防抖使用场景:
节流使用场景:
函数防抖(debounce)
表单输入框校验在用户不停的打字输入时并不需要向后台校验文本,只有当用户停下来一定时间后,这时候默认用户已经输入完毕了可以开始向后台提交文本了。
表单的提交按钮被用户多次连续点击时,显然并不需要每次点击都提交表单。仅在用户不点击之后,把最后一次的点击操作执行即可。
防抖函数的适用场景都有一个共同特点,就是高频触发并不会立即高频的执行,只有在结束高频触发一定时间间隔之后,执行最后一次触发。
代码实现就很简单了,短时间高频触发则重置计时器,计时器到达指定时间后,方才执行回调函数
var debounce = function (func, wait) { var timer; return function () { var self = this, args = arguments; if (timer) clearTimeout(timer); timer = setTimeout(function () { func.apply(self, args); }, wait); }}/**这里使用闭包是为了保存计时器,而不是定义一个全局变量来存放计时器。apply的作用则是为了处理this指向和参数的传递,因为setTimeout会将this指向window。*/函数节流(throttle)
在触发频率很高的场景中,通常并不需要以同样的高频来执行回调函数,这时候需要人为的控制回调函数执行频率,以一个固定的较低频率来执行。
实现原理是,记录第一次触发时间,之后每次触发都对比是否到达指定的间隔时间,只有大于等于指定间隔才会再次执行,并重新开始记录触发时间。
可以用时间戳记录并计算出时间间隔,同样也可以用计时器来控制时间间隔。
var throttle = function (func, wait) { var timer; return function () { var self = this, args = arguments; if (!timer) { timer = setTimeout(function () { func.apply(self, args) clearTimeout(timer) timer = null; }, wait) } }}最后用一张图来对比防抖和节流函数的执行的频率,可视化实现
以上就是浅析JavaScript 函数防抖和节流的详细内容,更多关于JavaScript 函数防抖和节流的资料请关注其它相关文章!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
面试的时候我们经常会问别人是理解什么是节流和防抖,严格的可能要求你写出节流和防抖函数,这里我们抛开loadsh工具库手写节流和防抖1.节流函数throttle/
防抖和节流的区别是防抖即触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。节流即高频事件触发,但在n秒内只会执行一次,所以节流
前言上一篇博文我们讲到了节流函数的应用场景,我们知道了节流函数可以用在模糊查询、scroller、onresize等场景;今天这篇我们来讲防抖函数的应用场景::
本文实例讲述了js防抖函数和节流函数使用场景和实现区别。分享给大家供大家参考,具体如下:开发过程中,都遇到过某个事件被频发触发的场景,比如resize,scro
我们经常会遇到这种需求,现在我们在使用百度搜索的时候他们的思想也是根据防抖节流而实现的,至于用防抖还是节流根据自己需求。constdelay=(function