防抖函数的使用

「这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战」

前言

如果你是一个对代码有高要求的人，一定会认为我们前端最常考虑的就是，用户体验，代码优化，但是在实际使用当中，和项目的时间紧张程度，并不能做到理想的代码优化，只想着怎么提高效率，完成客户的需求。其实有时候也是看项目而言其他，客户一心只想着快速上线项目，而迟迟看不到项目成果，这很容易让客户失去耐心。

什么防抖?

就是在一个任务被频繁触发的情况下，只有当任务触发的间隔超过指定间隔的时候，该任务才会执行。常见的情况就是输入框搜索。

闭包

其实在使用防抖函数的过程中，重点就是闭包的使用，平常我再理解闭包的时候，我就理解他成，一个函数里面return里另外一个函数；通俗的就是函数里面套函数，然而，函数套函数，最终的目的，就是创建一个局部的变量，才是他最终的目的。

在函数foo2中访问了local变量，这就是一个普通的闭包

function foo(){
    var local= '变量'
    return foo2(){
         console.log(local)
    }
}

使用场景

现在有一个树形结构的树状图，我们需要通过调用搜索接口，获取相关关键字的树状数据。但是，因为频繁调用接口，不太友好，我们需要用户输入关键字，一段时间未输入的情况下，再请求接口，查询数据，这就需要在代码中使用到防抖功能。

防抖函数

function debounce(delay,callback){
    let timer;
    return function (value){
        clearTimeout(timer);
        timer = setTimeout(()=>{
            callback && callback(value)
        },delay);
    }
}

//请求接口
function something(value){
    //这里获取到输入框的值，然后进行接口请求，重新渲染树状图的数据
    console.log(value)
}
var changeInput = debounce(100,something)
changeInput(1234)

总结

优化有利有弊，最重要的是找到自己合适的方式才是最重要的，闭包好用，但是他也有自己的缺点，看自己需求进行取舍。好的东西，是很好，但是要适不适合自己。