函数节流：当持续触发事件时，保证一定时间段内调用一次事件处理函数。比如一个input绑定一个oninput事件，input输出内容的时候每隔1000毫秒才会执行一次。
下面我们介绍三种节流函数的封装，前俩种都有一定的弊端。
<input id="inp"/>
function throttle(e) {
console.log(e.target.value)
}
inp.oninput=throttle(fn,1000)
// 第一种：当输入的时候不会立即执行
function throttle (fn ,time) {
let timer = null
return function() {
if (!timer) {
timer = setTimeout(()=>{
fn.apply(null,arguments)
timer = null
},time)
}
}
}
// 第二种：第一次立即执行一次, 有可能最后一次事件不执行
function throttle (fn ,time) {
let startTime = 0
return function() {
let nowTime = Date.now()
if (nowTime - startTime >=time) {
fn.apply(null,arguments)
startTime = now
}
}
}
// 第三种：结合了前俩种的写法，我认为这样封装相对完美
function throttle (fn ,time) {
let startTime = Date.now()
let timer = null
return function() {
let nowTime = Date.now()
clearTimeout(timer)
if (nowTime - startTime >= time){ // 时间范围允许立即执行
fn.apply(null,arguments)
startTime = Date.now()
}else {
timer = setTimeout(()=>{
fn.apply(null,arguments)
}, time)
}
}
}
