前端防抖和节流的知识点你还不懂？手撕防抖和节流函数、为什么要使用防抖和节流及应用场景

防抖和节流

防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。

防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时
节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

为什么要防抖和节流？

​ 在给DOM绑定事件时，有些事件我们是无法控制触发频率的。 如鼠标移动事件onmousemove, 滚动滚动条事件onscroll，窗口大小改变事件onresize，瞬间的操作都会导致这些事件会被高频触发。 如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。

防抖（debounce）

在用户停止某个操作一段时间之后才执行相应的监听函数，而不是在用户操作的过程当中，浏览器触发多少次事件，就执行多少次监听函数。

策略：

当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。

// 防抖  debounce(callback,delay);

inp.oninput = debounce(function () {
// 在这里可以进行逻辑操作
...
}, 2000);
    
// 通过闭包实现防抖  fn为要执行的函数 
function debounce(fn,delay){
    //设定一个定时器
    let timer=null;
    return function(){
        //使用闭包，如果delay未到，再次触发，清除上一次的定时器，重写一个定时器
    	if(timer!=null){
        	clearTimeout(timer);
        	timer = setTimeout(() => {
            	fn(...args);
        	}, delay);
        	timer = null;
    	}else{
            //如果没有上一次的定时器，设置对应的定时器
			timer = setTimeout(() => {
				fn(...args);
				timer=null;
			}
		}
	}	

//简化版优化：
function debounce(fn,delay) {
    let timer = null;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn(...args);
        }, delay);
        timer = null;
    }    
}

节流（throttle)

节流：如果n秒内触发多次函数，只有一次生效。

策略：

1、记录下前一次执行的时间

2、事件被触发时，判断当前触发时间与上一次执行的时间差是否大于间隔时间（delay），如果大于：执行回调函数，反之忽略掉即可。

//回调函数
function fn(...args){
	const scrollTop = document.documentElement.scrollTop;
    //打印滚动高度
    console.log(scrollTop);
}

//节流函数
function throttle(fn, delay) {
    //记录当前时间
    const record = Date.now();
    return function (...args) {
        const now = Date.now();
        const interval = now - record;
        if (interval > delay) {
            //大于间隔时间
            fn(...args);
            record = now;
        }
    }
}

//使用
window.onscroll = throttle(fn,500);

上面这个函数基本可以满足我们的节流需求，但是，不知道大家有没有发现上面这个节流函数的问题：我们的第一个record是throttle函数第一次调用的时间，而不是用户上一次回调函数真正执行的时间。

！这样会产生一个结果：用户第一次触发事件（比如：用户进入页面，第一次滑动滚动条）时就会执行一次回调函数

如果我们的需求是以用户第一次触发事件为起始时间进行节流，那么我们的策略是：

1、事件触发时生成定时器，利用定时器执行回调函数（这样，第一次执行回调函数的时间就是以事件第一次触发为起始时间的）

2、间隔期间调用，忽略即可

function throttle(fn, delay) {
    //标识定时器有没有被生成
    let done = false;
    return function (...args) {
        if (!done) {
            setTimeout(() => {
                fn(...args);
                //执行完后，标识置为false
                done = false;
            }, delay);
            //定时器已生成
            done = true;
        }
    }
}

应用场景

1、防抖技术

1、页面resize事件 用户再放大或缩小页面时不执行真正的回调函数等到停止在执行；

2、页面scroll事件，例如回到顶部按钮

3、搜索框keyup、keydown事件，输入完成后才真正执行回调函数

2、节流技术

1、页面的scroll

2、搜索框keyup、keydown事件