防抖
当很频繁地（在设置的事件内）触发某一个回调的时候，只执行最后一次触发的回调。
应用场景：用户持续点击某一按钮（抢购某一商品）
代码语言：javascript复制// 防抖函数接收一个函数和延时时间
function debounce(fun, delay) {
// 1.设置一个定时器变量
var timer = null;
return function() {
// 清除上一次定义的定时器，保证只执行最后一次定时器里面的操作
clearTimeout(timer);
timer = setTimeout(() => {
fun();
}, delay)
}
}
function fn() {
console.log('sss')
}
window.addEventListener('scroll', debounce(fn, 2000))节流
如果持续触发事件，则每隔一段时间才会触发一次。
应用场景：发送ajax请求，搜索功能获取提示信息，或者用于鼠标的跟随动画实现，scroll，resize, touchmove, mousemove等极易持续性促发事件的相关动画问题，降低频率
实现方式一：使用 setTimeout
代码语言：javascript复制function throttle(fun, delay) {
// 定时器变量
var timer = null;
return function() {
// 判断是否已经触发过一次回调了，触发过一次则等待上一次执行完
if(!timer) {
timer = setTimeout(() => {
fun();
// 执行完后就把定时器变量设为空，方便再执行下一次
timer = null;
}, delay)
}
}
}
function fn() {
console.log('zhiing')
}
window.addEventListener('scroll', throttle(fn, 2000))实现方式二：使用 时间戳
代码语言：javascript复制function throttle(func, delay) {
// 设置一个变脸用于接收之前的时间戳
var preTime = 0;
return function() {
// 获取当前的时间戳
var now = Date.now()
// 判断是否在delay时间间隔内，是就不执行，不是就执行
if(now - preTime >= delay){
func()
// 将当前时间赋值给preTime 作为上一次执行的时间，以此来判断上一次和下一次执行的时间间隔
preTime = now
}
}
}
function fn() {
console.log('zhiing')
}
window.addEventListener('scroll', throttle(fn, 2000))这两种实现的方式的不同点是：
使用setTimeout一开始执行就会有延迟，而使用时间戳的方式当第一次触发回调会立即执行
函数的防抖与节流都是优化性能的一种方式，目的都是，降低回调函数的执行频率，节省计算资源。
