js中的防抖和节流

防抖节流意义

防抖节流二者做的处理最终想要达到的目的就是减少对来自于页面的操作。限制用户交互次数，避免频繁请求。

载体

主要用于一些可能会短时间内频繁操作的事件。例如click、scroll、resize、keydown、mousemove，input等，对于这一类事件，会很有可能被重复操作，重复向服务器请求数据。这样就很影响性能。

实现

在搜索的时候，搜索引擎一般会根据用户输入的进行联想操作，或者当你输入一段关键字之后直接帮你搜索。这种情况下，如果用户按键松开后就去请求数据的，那么将会造成过多的请求服务器数据。这种无疑会造成请求资源的浪费。我将针对input这一个事件来写相应的防抖和节流。

未作防抖节流

以输入框为例，我将给input绑定input事件，当键盘松开则在控制台打印此时input框内的内容。

let input = $('.input');
input.on("input", function(){

    console.log($(this).val()); // 每一次按键松开都会触发函数打印当前值

});

效果：

可以看到每松开一次按键都会在控制台打印。这就相当于每次都向服务器请求数据。

做防抖处理

防抖的意思：
在事件触发指定时间之后才会执行相应的处理，若在这指定时间内事件又被调用，则会重新计时执行。
所以如果事件一直在指定时间内连续的执行，则不会触发相应处理。直到一次指定时间内没有事件被执行，才会执行一次相应的处理。

const anti_shake = function(){
    let timer = null;

    return function(val){
        if(timer){ // 如果存在定时器，则清除上一次操作的定时器
            clearInterval(timer);
        }
        timer = setTimeout(() => { // 重新开启定时器
            console.log(val);
        }, 500);
    }
}

const ctrl = anti_shake();

document.getElementById("input").addEventListener('input', function(e){
    ctrl(e.target.value);
});

效果：

可以看到在输入暂停500ms之后才会触发事件，不停下来不会触发事件。

节流

节流的意思：
事件触发后在指定时间后执行相应的事件处理，如果在这个指定时间内再次触发事件，事件不会被执行。
直到上一次事件处理完成后，才会执行下一次的事件处理。如果一直触发事件，则事件的处理会很规律的被执行。

const throttling = function(){
	letlock = false; // 定义锁
	
	return function(val){
	    if(lock){
	        return;
	    }
	    lock = true; // 开启锁，阻止其他事件
	    // 执行操作
	    console.log(val);
	    setTimeout(() => {
	        lock = false; // 500ms后开锁
	    }, 500);
	}
}

const ctrl = throttling();

document.getElementById("input").addEventListener('input', function(e){
	ctrl(e.target.value);
});

效果：

一直输出的话就会每隔一段时间处理相应的操作。