本文主要记录分享下 性能优化 中在 不可避免 情况下重复请求或者重复调用方法下的前置后置 节流防抖 的处理方式,以下为js版本其他语言可以 参考 类似。
优化效果
以下是优化前后对比截图。
优化前
优化后
优化方法
主要分享一下两种方式前置和后置
前置节流防抖
/**
* 前置节流防抖
* @param func
* @param delay
* @returns {function(): *}
*/
window.beforeThrottle = function (func, delay) {
let lastCall = 0;
return function () {
const now = Date.now();
if (now - lastCall < delay) {
return;
}
lastCall = now;
return func.apply(this, arguments);
};
}
后置节流防抖
/**
* 后置节流防抖
* @param func
* @param delay
* @returns {(function(): void)|*}
*/
window.laterThrottle = function (func, delay) {
let lastCall;
return function () {
clearTimeout(lastCall);
let that = this;
lastCall = setTimeout(function () {
func.apply(that, arguments);
}, delay);
}
}
前置主要是以第一次请求数据为主,后置主要以最后一次请求数据为主。
以上就是关于性能优化前置后置节流防抖,防止不避免情况下重复触发的优化方案,有兴趣的可以尝试下,如果有更好的方案可以评论区分享下。