防抖与节流
在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。
函数防抖
指的是:触发高频事件n秒内函数只会执行一次,如果n秒内这个高频事件再次被触发,则会重新计算事件
实现思路:
每次触发事件都重制之前的延时调用方法, 以input为例
function foo(fn){
let timeout = null; // 通过闭包来保存一个标记!!
return function(){
if(timeout !== null)
clearTimeout(timeout);
timeout = setTimeout(fn, 500);
}
}
function fn(){
console.log('show');
}
var inp = document.getElementById('input');
inp.addEventListener('input', foo(fn));
函数节流
高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率
思路:
每次触发事件时都判断当前是否有等待执行的延时函数
function throttle(fn){
// 每次触发事件时都判断当前是否有等待执行的延时函数
let canRun = true; // 通过闭包保存canRun
return function(){
if( !canRun ) return;
canRun = false;
setTimeout(()=>{
fn();
canRun = true;
})
}
}
function sayHi(e){
console.log(e.target.width, e.target.height);
}
window.addEventListener('resize', throttle(sayHi))
总结
函数防抖:将几次操作合并为一此操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。
函数节流:使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。
区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现