throttle debounce 原理及应用

// debounce 可以理解为乘坐电梯，每次有人上电梯都会等一下，一直会delay
/**
* 空闲控制函数， fn仅执行一次
* @param fn{Function}     传入的函数
* @param delay{Number}    时间间隔
* @param options{Object}  如果想忽略开始边界上的调用则传入 {leading:false},
*                         如果想忽略结束边界上的调用则传入 {trailing:false},
* @returns {Function}     返回调用函数
*/export function debounce(fn, delay, options) {var timeoutId; var leadingExc = falseoptions = options || {}return function() {var that = this; var args = argumentsif (!leadingExc && !(options.leading === false)) {fn.apply(that, args)}leadingExc = trueif (timeoutId) {clearTimeout(timeoutId)}timeoutId = setTimeout(function() {if (!(options.trailing === false)) {fn.apply(that, args)}leadingExc = false}, delay)}
}// throttle 不会将之前的定时任务清除，只是将执行次数减少了，使之匀速/*** 频率控制函数， fn执行次数不超过 1 次/delay* @param fn{Function}     传入的函数* @param delay{Number}    时间间隔* @param options{Object}  如果想忽略开始边界上的调用则传入 {leading:false},*                         如果想忽略结束边界上的调用则传入 {trailing:false},* @returns {Function}     返回调用函数*/export function throttle(fn, delay, options) {var wait = falseoptions = options || {}return function() {var that = this; var args = argumentsif (!wait) {if (!(options.leading === false)) {fn.apply(that, args)}wait = truesetTimeout(function() {if (!(options.trailing === false)) {fn.apply(that, args)}wait = false}, delay)}}
}

有关debounce 的应用场景 https://blog.csdn.net/weixin_36878452/article/details/111526506，vue button 双击导致多次保存数据
throttle 常用来让优化滚动条滚动事件（触发非常及时，回调函数会不断被执行，节流之后会使得页面性能更好）

created() {this.onProductsScroll = throttle(this.onProductsScroll, 30, { leading: false })this.onProductsScrollLeft = throttle(this.onProductsScrollLeft, 30, { leading: false })this.$store.commit('setProductPromotion', [])this.$store.commit('setCashBackPromotion', null)this.$store.commit('setDeliveryFeeBackPromotion', null)
}

throttle debounce 原理及应用相关推荐

throttle/debounce应用及原理
文章目录基础应用 "时间"防抖 "空间"防抖进阶应用 throttleFirst throttleLast throttleLatest debounce ...
SAP UI5和Angular的函数防抖(Debounce)和函数节流(Throttle)实现原理介绍
这是Jerry 2021年的第 11 篇文章,也是汪子熙公众号总共第 282 篇原创文章. Jerry之前的文章 SAP UI5 OData谣言粉碎机:极短时间内发送两个Odata request, ...
Debounce 和 Throttle 的原理及实现
在处理诸如 resize.scroll.mousemove 和 keydown/keyup/keypress 等事件的时候,通常我们不希望这些事件太过频繁地触发,尤其是监听程序中涉及到大量的计算或者有 ...
Javascript Throttle Debounce
Throttle 无视一定时间内所有的调用,适合在发生频度比较高的,处理比较重的时候使用. var throttle = function (func, threshold, alt) {var la ...
throttle debounce节流防抖(uniapp)
引用uview中的话就是何谓节流和防抖? 节流节流的意思是,规定时间内,只触发一次.比如我们设定500ms,在这个时间内,无论点击按钮多少次,它都只会触发一次.具体场景可以是抢购时候,由于有无数人 ...
throttle debounce
最后一个参赛者说了算防抖的主要思想在于:我会等你到底.在某段时间内,不管你触发了多少次回调,我都只认最后一次. var debounce = function(idle, action){var l ...
节流函数(throttle)的原理
throttle节流函数,就是一个函数调用的频率控制器: var safe = true; function throttle() {if (safe) {lazyLoad();safe = fals ...
debounce throttle
debounce 原理监听一个输入框,文字变化后触发change事件,如果直接用keyup事件,则会频繁触发change事件防抖:用户输入结束或暂停的时候,才会触发change事件应用场景: s ...
java实现debounce_利用throttle和debounce实现延迟请求
当你在前端点击一个搜索往后面发送请求的时候会触发一个像后端的请求,当你不在前端做一些控制的时候,就会发现会发送特别多的请求比如一个人员搜索,虽然前端控制了当搜索字符大于3个字的时候才发送,但是后续还 ...

throttle debounce 原理及应用

throttle debounce 原理及应用相关推荐

最新文章

热门文章