节流
一、节流：定时器方式
function throttle(func, delay){
let timer = null;
return function(){
let context = this;
let args = arguments;
if(!timer){
timer = setTimeout(function(){
func.apply(context, args);
timer = null;
}, delay);
}
}
}
window.addEventListener('scroll',throttle(()=>console.log('fn 函数执行了'),1000))
二、节流：时间戳的方式
//返回一个函数，当调用该函数时，在给定的时间窗口内最多只触发一次。通常，调整后的函数会尽可能多地运行，而不会在每个等待期间运行超过一次;但是如果您想要禁用前边的执行，那么传递{leading: false}。要禁用后沿上的执行，同上。
// fn 是需要执行的函数
// wait 是时间间隔
const throttle = (fn,wait = 50)=>{
// 上一次执行 fn 的时间
let previous = 0;
// 将 throttle 处理结果当作函数返回
return function(...args){
// 获取当前时间，转换成时间戳，单位毫秒
let now = +new Date();
// 将当前时间和上一次执行函数的时间进行对比
// 大于等待时间就把 previous 设置为当前时间并执行函数 fn
if(now-previous > wait){
previous = now;
fn.apply(this,args);
}
}
}
// DEMO 1
// 执行 throttle 函数返回新函数
const betterFn = throttle(() => console.log('fn 函数执行了'), 1000)
// 每 10 毫秒执行一次 betterFn 函数，但是只有时间差大于 1000 时才会执行 fn
setInterval(betterFn, 10)
//DEMO2
window.addEventListener('scroll', throttle(()=>console.log('fn 函数执行了'), 1000))
- 存在问题：
上面说过实现 throttle 的方案有 2 种，一种是通过时间戳判断，另一种是通过定时器创建和销毁来控制。
第一种方案实现这 3 种调用方式存在一个问题，即事件停止触发时无法响应回调，所以 { trailing: true } 时无法生效。
第二种方案来实现也存在一个问题，因为定时器是延迟执行的，所以事件停止触发时必然会响应回调，所以 { trailing: false } 时无法生效。
- 解决：
underscore.js源码
防抖
//返回一个函数，只要它继续被调用，就不会被触发。函数将在停止调用N毫秒后被调用。如果传递了immediate，则在前边触发该函数，而不是在末尾触发
// fn 是需要防抖处理的函数
// wait 是时间间隔
const debounce = (fn,wait = 50,immediate) => {
// 通过闭包缓存一个定时器 id
let timer = null;
// 将 debounce 处理结果当作函数返回
// 触发事件回调时执行这个返回函数
return function(...args){
// 如果已经设定过定时器就清空上一次的定时器
if(timer) clearTimeout(timer);
// ------ 新增部分 start ------
// immediate 为 true 表示第一次触发后执行
// timer 为空表示首次触发
if( immediate&& !timer){
fn.apply(this.args);
}
// 开始设定一个新的定时器，定时器结束后执行传入的函数 fn
timer = setTimeout(()=>{
fn.apply(this,args);
},wait);
}
}
// DEMO
// 执行 debounce 函数返回新函数
const betterFn = debounce(() => console.log('fn 防抖执行了'), 1000)
// 停止滑动 1 秒后执行函数 () => console.log('fn 防抖执行了')
document.addEventListener('scroll', betterFn)
加强版 throttle
//将「节流」和「防抖」合二为一，变成加强版的节流函数，关键点在于「 wait 时间内，可以重新生成定时器，但只要 wait 的时间到了，必须给用户一个响应」。
//这种合体思路恰好可以解决-----用户的操作非常频繁，不等设置的延迟时间结束就进行下次操作，会频繁的清除计时器并重新生成，所以函数 fn 一直都没办法执行，导致用户操作迟迟得不到响应的问题。
// fn 是需要节流处理的函数
// wait 是时间间隔
function throttle(fn, wait) {
// previous 是上一次执行 fn 的时间
// timer 是定时器
let previous = 0, timer = null
// 将 throttle 处理结果当作函数返回
return function (...args) {
// 获取当前时间，转换成时间戳，单位毫秒
let now = +new Date()
// ------ 新增部分 start ------
// 判断上次触发的时间和本次触发的时间差是否小于时间间隔
if (now - previous < wait) {
// 如果小于，则为本次触发操作设立一个新的定时器
// 定时器时间结束后执行函数 fn
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
previous = now
fn.apply(this, args)
}, wait)
// ------ 新增部分 end ------
} else {
// 第一次执行
// 或者时间间隔超出了设定的时间间隔，执行函数 fn
previous = now
fn.apply(this, args)
}
}
}
// DEMO
// 执行 throttle 函数返回新函数
const betterFn = throttle(() => console.log('fn 节流执行了'), 1000)
// 第一次触发 scroll 执行一次 fn，每隔 1 秒后执行一次函数 fn，停止滑动 1 秒后再执行函数 fn
document.addEventListener('scroll', betterFn)
