js防抖

防抖：

案例：

搜索时在输入框输入内容，频繁的发送请求

解决办法：设置停止输入一段时间之后再发送请求

没有设置防抖

js代码

var text = document.getElementById('write');
function write() {
    console.log(text.value);
}
text.addEventListener('input',write);

效果:

会发现当我们不断的输入搜索内容时会不断的发送请求

设置防抖

js代码：

//方法一实现效果：可是防抖，但是方法第一次执行也是在delay的时间之后执行
var text = document.getElementById('write');
function denounce(fn,delay) {
    var timer;
    return function () {
        if(timer) clearTimeout(timer);
        timer = setTimeout(function () {
            fn.call(this.arguments);
        },delay)
    }
}
function write(){
    console.log(text.value);
}
text.addEventListener('input',denounce(write,1000))
//方法二：可以防抖，而且第一次方法执行时没有延迟，具体用哪一种看业务需求
function denounce(fn,delay) {
    var timer;
    return function () {
        if(timer) clearTimeout(timer);
        let done = !timer;
        timer = setTimeout(function () {
            timer = null;
        },delay)
        if(done) fn.call(this.arguments);
    }
}

效果：

会发现当我们设置了防抖后停止输入1秒后才会执行请求

但是这样做也存在问题：当我们要不断的高频触发一个事件时会导致事件无法触发，比如滚动事件，当我们不断的滚动页面时，由于没到延迟的时间，导致高频时间不能被触发。