函数节流throttle方法和函数防抖debounce方法
函数节流和函数防抖是什么
函数节流
对于持续触发的事件,规定一个间隔时间(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参考