面试题系列之防抖与节流

防抖与节流是实际开发过程经常会碰到的应用场景，例如防抖，就可应用在即时搜索的过程中，由于用户输入的过快，如果不做处理的话，很可能会导致前一次搜索结果的值出现在后一次搜索结果的值的后面，这样就会导致信息的搜索有误，这种情况就可采取防抖策略，具体思路时，只对用户最后一次的输入进行相关搜索，代码实现如下：

// 关于防抖
function _debounce(fn,ms){
    let t;
    function next(){
        clearTimeout(t);  // 把上次清空
        t = setTimeout(() => {
            fn.apply(this,arguments);
        }, ms);
    }
    return next;
}
function test1(str){
    console.log(str);
}
// 测试代码
let p = _debounce(test1,500);
p("1");
setTimeout(() => {
    p("2");
}, 100);
setTimeout(() => {
    p("3");
}, 200);

最后的结果只会打印3，防抖成功

而节流的应用场景也很多，例如防止表单的重复点击，因为用户每次表单的内容都一样，所以在多次点击触发事件的时候，其实我们只需要向后端提交一次请求就行了，它与防抖的不同点在于，他的函数传入参数是没有发生变化的，所以，我们使用第一次的函数参数即可，同时为了防止重复进入，可以设置一个flag标识点击状态，代码实现如下：

// 节流
function jieliu(fn,ms){
    let flag = true;
    function next(){
        if(!flag){
            return;
        }
        flag = false;
        setTimeout(() => {
            fn.apply(this,arguments);
        }, ms);
    }
    return next;
}
// 防止重复点击
let p2 = jieliu(test1,500)
p2("1");
setTimeout(() => {
    p2("1");
}, 100);
setTimeout(() => {
    p2("1");
}, 200);

经过验证，只打印一次1，节流成功。

总结：其实防抖与节流的实现差不多，都是利用了函数的闭包原理，对于闭包如果能熟练使用的话，这样的需求应该不难解决。