总结:
函数防抖:将多次操作合并为一次操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。
函数节流:使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。
区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。
//防抖:函数防抖就是指在触发事件后,在n秒内函数只能执行一次,
// 如果触发事件在n秒内又触发了这个事件,则会重新计算函数延迟执行时间。
// 实现方式:每次触发事件时设置一个延迟调用方法,并且取消之前的延时调用方法。
// 缺点:如果事件在规定的时间间隔内被不断的触发,则调用方法会被不断的延迟。
// 举个例子:坐电梯的时候,如果电梯检测到有人进来(触发事件),就会多等待10秒,
// 此时如果又有人进来(10秒之内无重复触发事件),那么电梯就会再多等10秒。
// 在上面这个例子中,电梯检测到有人进入10秒之后,才会关闭电梯门开始运作,
// 因此,函数防抖的关键在于,在一个事件发生的一定时间之后,才执行特定的动作。
// 为什么需要?
// 前端开发中,有一些事件,例如onresize,scroll,mousemove,mousehover等,
// 会被频繁的触发(短时间内),不做限制的话,有可能一秒之内执行几十次,几百次,
// 如果在这些函数内部执行了其他函数,尤其是操作dom的函数(浏览器操作dom是很耗费性能的),
// 那不仅仅会浪费计算机资源,还会降低程序运行速度,甚至造成浏览器卡死,崩溃。除此之外,
// 短时间内重复的ajax调用不仅会造成数据关系的混乱,,还会造成网络拥塞,增加服务器的压力。
//如何解决问题?
// 函数防抖的要点,是需要一个setTimeout来辅助,延迟运行需要执行的代码。
// 如果方法多次触发,则把上次记录的延迟执行代码用clearTimeout清理掉,重新开始计时。
// 若计时期间事件没有被重新触发,则延迟时间计时完毕执行目标代码。
function debounce(fn){
let timeout=null;
return function(){
clearInterval(timeout);
timeout=setTimeout(()=>{
fn.apply(this,arguments)
},1000);
}
}
function sayHi(){
console.log('防抖成功');
}
let inp=document.getElementById('inp');
inp.addEventListener("input",debounce(sayHi));
//节流:高频事件触发,但在n秒内只执行一次,所以节流就会稀释函数的执行频率。
// 节流单纯的降低代码执行频率,保证一段时间内目标代码只执行一次。
// 实现方式:每次触发事件时,如果当前有等待执行的延迟函数,则直接return。
function throttle(fn){
let canRun=true;
return function(){
//在函数开头判断标记是否为true,不为true则直接return
if(!canRun) return;
canRun=false;
setTimeout(()=>{
fn.apply(this,arguments);
canRun=true;
},1000);
};
}
function sayHi1(){
console.log('hello');
}
let inp=document.getElementById('inp');
inp.addEventListener('input',throttle(sayHi1));