我们在web项目中经常会需要用到 图片懒加载 ，设置中我们需要监听scroll
滚动条滚动事件。这种事件响应得十分频繁，当我们监听器的回调函数越复杂，对性能影响就会越严重。为此我们利用定时器，使事件回调函数在监听中按照固定的事件间隔触发，而不是每像素移动都触发。
跟普通的事件监听设置基本一样，我们只要对回调函数体进行一次封装。
这里我封装了一个函数，参考了小程序API的设计模式，我们只传递一个map。
lazyEvent.throttle({
dom: window, // 绑定事件监听的dom
eventName: 'scroll', // 监听什么事件
delay: 100, // 回调函数触发的时间间隔
event: res => { // 回调函数执行了什么
console.log(1)
}
})
接下来我们只需要看懂下文标记的10行左右代码即可学会函数节流
export class lazyEvent {
constructor() {}
/* 函数节流 */
static throttle(map){
/* 取map传进来的值 */
let DOM = map.dom
let eventName = map.eventName
let event = map.event
let delay = map.delay ? map.delay : 100
/* ----------------这里是重点↓ ------------------*/
let timer = null // 外部定义timer变量，用来存定时器ID
let newEvent = function () { // 声明一个新函数，用来包裹我们目标函数体
if(timer){ // 如果有定时器就不继续执行下面的代码
return
}else{ // 如果没有定时器就执行目标函数体，然后设置一个定时器
event() // 目标函数体
timer = setTimeout(function () { // 这个定时器一个时间间隔后会销毁自身
clearTimeout(timer)
timer = null
},delay)
}
}
/* -----------------这里是重点↑ --------------------*/
DOM.addEventListener(eventName, newEvent)
}
}
1.首先呢，这个 newEvent就是一层皮，里面包了我们 真正要执行的事件响应，以及我们本次要添加的一个定时器。
2.定时器函数的返回值是这个 定时器的ID 我们需要在 '皮' 外 存一下。
3.这个定时器的回调函数就是销毁它自身，并且清空我们存储的ID，所以我们可以通过ID判断当前有没有定时器。
4.我们进入 '皮' 里有一个判断，现在有定时器吗？ 如果有我们就立即结束本次响应。如果没有我们就执行我们的目标 -- 响应事件，然后没有我们就再做一个定时器呗。
以上就是函数节流的主要内容，希望大家能够学会。ps.类似的事件还有resize，mousemove这种。
