函数防抖与节流

函数防抖

应用场景：

1. 通过监听 scroll 事件，检测滚动位置，根据滚动位置显示返回顶部按钮
2. 通过监听 resize 事件，对某些自适应页面调整DOM的渲染（通过CSS实现的自适应不再此范围内）
3. 通过监听 keyup 事件，监听文字输入并调用接口进行模糊匹配

定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。

原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

let timer;
window.onscroll  = function () {
	if(timer){
		clearTimeout(timer)
	}
	timer = setTimeout(function () {
		//滚动条位置
		let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
		console.log('滚动条位置：' + scrollTop);
		timer = undefined;
	},200)
}

函数节流

应用场景：

1. 当我们做图片懒加载（lazyload）时，需要通过滚动位置，实时显示图片时

定义：触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。

原理：函数预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。

let startTime = Date.now(); //开始时间
let time = 500; //间隔时间
let timer;
window.onscroll = function throttle(){
    let currentTime = Date.now();
    if(currentTime - startTime >= time){
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('滚动条位置：' + scrollTop);
        startTime = currentTime;
    }else{
        clearTimeout(timer);
        timer = setTimeout(function () {
            throttle()
        }, 50);
    }
}