js中的函数防抖和函数节流

函数防抖：
当某些事件触发频率太高，浏览器来不及处理，会造成浏览器卡顿，掉帧。
例如：文本框input事件，窗口resize 事件，scroll滚动条事件等

函数防抖方法：
例第一种：
var timer；
const inp = document.getElementById(‘input’);
inp.οninput=function(){
clearTimeOut(timer);
timer = setTimeout(function(){
console.log(“执行的方法”)
},2000)
}

例第二种：
function debounce(func,wait){
var timer;
return function(){
cleartimerout(timer)
timer = setTimeout(func,wait)
}
}
function func(){
console.log(“执行的方法”)
}
const inp = document.getElementById(‘input’);
inp.addEventListener(debounce(func,500))

函数节流：
事件在规定的时间内，最多执行一次，无论事件被触发多少次

例，第一种方法
var timer；
var initTime = new Date();
const inp = document.getElementById(‘input’);
function func(){
console.log(“执行的方法”)
}
inp.οninput=function(){
var eventTime = new Date()
if(eventTime-initTime<=2000){
clearTimerout(timer)
timer = setTimeout(function(){
func()
},2000)
}else{
initTime = eventTime
func()
}
}

例,第二种方法

fucntion throttle(func,wait){
var timer;
var initTimer= new Date()
return function(){
var eventTimer = new Date()
if(eventTimer - initTimer<=wait){
clearTimeout(timer)
timer = setTimeout(func,wait)
}else{
initTimer = eventTimer
func()
}

}

}