防抖和节流

一，防抖和节流的特点

二者都是闭包的一种应用场景。

二，防抖

概念：规定一个事件在触发后N秒执行，但是在未到N秒时再次触发事件，就以最后一次触发为准，重新计算时间。

应用场景：比如input搜索框要实现在内容改变change时调用接口查询。

如果没有防抖，就是输入一个字符调用一次接口；使用防抖后，就定义在输入内容5秒后执行查询。

原理：类似于一个定时器，再次触发事件后，把上个定时器清除掉

function debounce (func, delay) {
    var timer = null;
    return function() {
        var that = this;
        var args = argument;

        clearTimeout(timer); // 每次执行都清除之前的定时器
        timer = setTimeout(() => {
            func.call(that, args); // 执行传进来的函数func，且带入参数
        }, delay);
    }
}

三、节流

概念：在规定时间内，只能触发一次函数，多次触发则不调用。

应用场景：浏览器滚动条、点击提交按钮

原理对比：节流本质上与防抖一样，只是节流多了一个判断条件“第二次触发的时候，什么也不执行”

function throttle(func, delay) {
    var timer = null;

    return function() {
        var that = this;
        var args = argument;
        if (!timer) { // 在上次定时器没有完成前，不会再次执行
             timer = setTimeout(() => {
                func.call(that, args);
                timer = null; // 事件执行完后清除定时器
             }, delay);     
        }
    }
}