函数节流throttle方法和函数防抖debounce方法

• 函数节流和函数防抖是什么
• 函数节流
• 函数防抖
• 二者异同
• 实现
• throttle
• debounce
• 因为学这个 我发觉自己也不会apply是啥子

函数节流和函数防抖是什么

函数节流

对于持续触发的事件，规定一个间隔时间（n秒），每隔n秒只能执行一次。

函数防抖

对于在事件被触发n秒后再执行的回调，如果在这n秒内又重新被触发，则重新开始计时。

二者异同

相同：都能防止函数过于频繁的调用。
不同：

• 函数节流的情况下，函数将每个 n 秒执行一次。
• 函数防抖的情况下，函数将一直推迟执行，造成不会被执行的效果；

实现

好难哦，我这个小白就先学学初步实现吧

throttle

//时间戳的方式
function throttle(func, wait) {
let previous = 0;
return function() {
let now = +new Date();
let context = this;

if (now - previous >= wait) {
func.apply(context, arguments);
previous = now; // 执行后更新 previous 值
}
}
}
//定时器function throttle(func, wait) {
let time, context
return function(){
context = this
if(!time){
time = setTimeout(function(){
func.apply(context, arguments)
time = null
}, wait)
}
}
}

debounce

function debounce(func, wait) {
let timeout
return function () {
clearTimeout(timeout)
timeout = setTimeout(func, wait) //返回计时器 ID
}
}

因为学这个 我发觉自己也不会apply是啥子

来学学apply吧:D

基本参考自:
throttle参考
debounce参考

• 点赞
• 收藏
• 分享
• 文章举报