debounce(防抖)、throttle(节流/限频)
JS throttle与debounce的区别(有实现代码):https://segmentfault.com/a/1190000014292298
js 函数的防抖(debounce)与节流(throttle)(有更详细的实现代码)https://www.cnblogs.com/cc-freiheit/p/10827372.html
// 去抖就是连续多次delay内的操作取执行最开始的那一次或最后一次操作真正执行,下方代码是合成版
// 防止用户的连续多次click提交;scroll下拉刷新时,同一位置多次请求数据
/**
* @desc 函数防抖
* @param func 目标函数
* @param wait 延迟执行毫秒数
* @param immediate true - 立即执行, false - 延迟执行
*/
function debounce(func, wait, immediate) {
let timer;
return function() {
let context = this,
args = arguments;
if (timer) clearTimeout(timer);
if (immediate) {
let callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, wait);
if (callNow) func.apply(context, args);
} else {
timer = setTimeout(() => {
func.apply(context, args);
}, wait)
}
}
}
// 节流就是连续多次delay内的操作按照指定的间隔来执行
// scroll设置定位等的频繁位置计算;拖拽的频繁位置计算等
function throttle(func, wait) {
let lastTime
return function(...rest) {
if (!lastTime || (new Date().getTime() - lastTime > wait)) {
lastTime = +new Date()
func.apply(this, rest)
}
}
}
性能提速:debounce(防抖)、throttle(节流/限频):https://www.cnblogs.com/hity-tt/p/7852888.html