一、函数防抖 debounce
1、概念
其概念衍生自机械开关和继电器的去弹跳；可以这么理解，一个弹簧片，你一直向下按，它变形了，直至你松手，它会反弹，也就是直到你松开，反弹的事件才会执行；类似的，比如你一直滚动窗口，你预设的回调函数不执行，直至你停止滚动了才执行该回调函数； 想要实现这种效果，我们就需要用到函数防抖了。
2、适合对应的事件
scroll、resize
3、简单示例
let clock = null;
document.querySelector('.main-content').addEventListener('scroll', () => {
console.log('scroll会执行多次');
if (clock) {
clearTimeout(clock);
clock = null;
}
clock = setTimeout(() => {
console.log('我只执行一次')
}, 50)
})
4、封装后的函数
function debounce(fn,wait){
var timer;
return function(){
var args = Array.prototype.slice.apply(arguments);
if(timer){
clearTimeout(timer);
};
timer = setTimeout(function(){
fn.apply(this,args);
},wait);
}
}
5、效果
事件被连续触发多次后，其不会执行，直至你终止触发的事件后才开始执行；
防抖
二、函数节流Throttle
1、概念
连续触发事件，但是在n秒中只执行一次函数；
2、适合对应的事件
input、keyup
3、简单示例
function throttle (func,waitTime){
let preTime=0;
return function () {
let nowTime=new Date();
let context=this;
let args = arguments;
if(nowTime - preTime> waitTime ){
func.apply(context,args);
preTime=nowTime
}
}
}
4、封装后的函数
方式一、
function throttle(fn,wait){
var isExecute = false;
return function(){
var args = Array.prototype.slice.apply(arguments);
if(isExecute) {
return;
}
isExecute = true;
setTimeout(function(){
fn.apply(this,args);
isExecute = fale
},wait)
}
}
方式二、
function throttle(fn,wait){
var lastTime = new Date().getTime();
return function(){
var args = Array.prototype.slice.apply(arguments);
var curTime = new Date().getTime();
if((curTime - lastTime) < wait){return;};
lastTime = curTime;
fn.apply(this,args);
}
}
5、效果
事件被连续触发多次后，只在每隔你指定的时间内执行一次；
节流
三、节流与防抖可视化对比图
可视化对比图
