关于js防抖和节流

之前项目中为了提高性能防止某个事件频繁触发，使用过节流和防抖，但是没有总结过，今天针对节流和防抖总结一下使用经验

你可以把节流理解成防抖的升级版，节流是在防抖的基础上限制代码的执行次数
防抖和节流的作用：都是为了避免一段代码高频率无意义的触发，减少浏览器或者服务器的负担
防抖和节流的区别：
防抖：防止代码多频次执行造成页面抖动，在一定时间内，代码多次触发会销毁之前的执行过程
节流：在一定时间内，代码一旦执行就不能再重复执行
防抖和节流的使用场景：
防抖：使用场景有很多，例如滚动页面加载页面内容，拖动div修改div的位置，拖动div修改div的大小等
节流：比如请求提交，点击按钮时如果频繁点击会造成多次相同的请求，没有意义而且对后台压力也很大，这时就需要节流，频繁点击无法多次触发事件，事件一旦执行无法再次执行
防抖和节流的实现原理：都是操作延时器，把运行代码放到延时器中，反复执行之前关闭之前的延时器，只不过节流在这基础上有添加了一旦代码执行就不能在执行前再次触发

防抖

function debounce(fn,delay){
    let timer = null
    return function(){
        clearTimeout(timer)
        timer = setTimeout(function(){
            fn.aplly(this,arguments)
        },delay)
    }
}

function test(){
    console.log("防抖")
}

window.addEventListener("scroll",debounce(test,500))

这段代码中使用了一个闭包，将timer封装到debounce函数内，返回的函数在执行前会销毁之前的延时器，阻止了之前的代码执行并设置重新执行

节流

function debounce(fn,delay){
    let isRuning = false
    return function(){
        if(isRuning) return;
        clearTimeout(timer)
        isRuning = true
        timer = setTimeout(function(){
            fn.aplly(this,arguments)
            isRuning = false
        },delay)
    }
}

function test(){
    console.log("节流")
}

window.addEventListener("scroll",debounce(test,500))

节流是在防抖的基础上又加了一个开关，作用是保证代码一旦执行了就不能再被触发
其实也可以像下面这样写

function debounce(fn,delay){
    let isRuning = false
    return function(){
        if(isRuning) return;
        isRuning = true
        fn.aplly(this,arguments)
        isRuning = false
    }
}

function test(){
    console.log("节流")
}

window.addEventListener("scroll",debounce(test,500))

这段代码也能起到节流的作用
注意：如果test函数是一个ajax请求，那么isRuning=false需要在ajax请求结束后关闭，那test可能就需要一个回调函数了，或者用promise的方式去做

最后，防抖和节流在实际开发中不经常用，但是一旦用到他对代码性能的提升还是很有意义的，有很多库也封装了防抖函数，比如lodash中的debounce方法，感兴趣的朋友可以到lodash官网去看文档,最重要的是记住防抖的作用是防止一段代码高频次无意义的执行，只要能够实现目的，过程采用什么形式就根据个人的喜好去实现就好了，没必要拘泥于上诉的方式