防抖
1、定义：
最后一次触发后，在某个时间内，没有再次触发某个函数时，才真正的调用这个函数
2、应用场景：
- 输入框中频繁的输入内容，搜索或者提交信息；
- 频繁的点击按钮，触发某个事件；
- 监听浏览器滚动事件，完成某些特定操作；
- 用户缩放浏览器的resize事件；
3、简单实现：
//防抖
export function _debounce (fn, delay==300) {
var delay = delay || 1000，timer = null;
return function () {
var th = this，args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
fn.apply(th, args);
}, delay);
};
}
window.addEventListener('scroll',_debounce(()=>{
console.log('图片懒加载');
},350))
节流
1、定义：
第一次触发开始计算，在某个时间内（比如500ms），某个函数只能被触发一次。
2、应用场景：
- 监听页面的滚动事件；
- 鼠标移动事件；
- 用户频繁点击按钮操作；
- 游戏中的一些设计；
3、简单实现：
const throttle = (func,wait=300)=>{
let lastTime = 0;
return (...args)=>{
let now = new Date().getTime();
if(now - lastTime > wait){
func.apply(this,args);
lastTime = now;
}
}
}
window.addEventListener('scroll',throttle(()=>{
console.log('图片懒加载');
},350))
