性能优化之防抖与节流

防抖（debounce）

监听输入框，文字变化后触发change事件，如果直接调用keyup事件，则会频繁出发change事件，防抖就是用户结束输入或者暂停输入时，才会出发change事件。
下面来看看例子

const input1 = document.getElementById('input1');
input1.addEventListenser('keyup',function(){
	if(timer){
		clearTimeout(timer)
	}
	timer = setTimerout(()=>{
	//模拟触发change
	console.log(input1.value);
	//清空定时器
	timer = null
	},500)
})

上面例子运行结果可以看出，我们在持续不断的输入的时候，控制台是不会打印出value的值，当我们输入暂停500毫秒后，value的值才会打印出来。
下面我们来封装一下debounce函数

const debounce = (fn, delay = 500) => {
    let timer = null;
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(this.arguments);
            timer = null;
        }, delay);
    };
};

使用：

input1.addEventLister(
     "keyup",
    debounce(() => {
        console.log(input1.value);
     }),
     600
);

节流（throttle）

当我们在拖拽一个元素时，要随时拿到该元素被拖拽的位置，如果直接用drag事件，则会频繁出发，很容易导致卡顿，节流就是无论我们拖拽的速度多么快，都会按照每隔一个固定的时间触发一次。
看例子

const div1 = document.getElementById('div1');
div1.addEventListenser('drag',function(e){
	console.log(e.offsetX,e.offsetY)
})

从例子中我们能看出，一直拖拽，控制台会不停的输入当前的值。
使用节流：

const div1 = document.getElementById('div1');
let timer = null
div1.addEventListenser('drag',function(e){
	if(timer ){
		return
	}
	timer = setTimerout(()=>{
	console.log(e.offsetX,e.offsetY)
	//清空定时器
	timer = null
	},100)
})

控制台的打印频率会明显变慢，每隔100ms才会打印一次

节流的封装throttle:

const throttle = (fn, delay = 100) => {
    let timer = null;
    return function () {
        if (timer) {
            return;
        }
        timer = setTimeout(() => {
            fn.apply(this.arguments);
            timer = null;
        }, delay);
    };
};

使用如下：

div1.addEventListenser('drag',throttle(function(e){
	console.log(e.offsetX,e.offsetY)
},200)