防抖
在第一次触发事件时,不立即执行函数,而是给出一个期限值,比如200ms
- 如果在200ms内没有再次触发滚动事件,那么就执行函
- 如果在200ms内再次触发滚动事件,那么当前的计时取消,重新开始计时
function debounce(fn,delay){
let timer = null
return function() {
if(timer){
clearTimeout(timer) //进入该分支语句,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时
}
timer = setTimeout(fn,delay) // 计时
}
}
节流
连续触发事件但是在 n 秒中只执行一次函数,节流会稀释函数的执行频率。
方法一:该实现方式是通过使用setTimeout实现的,所以第一次不会立即调用回调函数。
function throttle(fn,delay){
let valid = true
return function() {
if(!valid){
//休息时间 暂不接客
return false
}
// 工作时间,执行函数并且在间隔期内把状态位设为无效
valid = false
setTimeout(() => {
fn()
valid = true;
}, delay)
}
}
方法二:使用时间戳的形式实现节流函数,一旦触发该方法,回调函数会立即先调用一次。
function throttle(fn, delay) => {
let pre = 0;
return function(){
let cur = new Date();
if(cur - pre > delay){
fn();
pre = new Date();
}
}
}