js防抖和节流

防抖：规定时间内多次执行，只执行最后一次

节流：规定时间内多次执行，只执行第一次

一，防抖

        规定时间内多次执行，只执行最后一次

        有比喻：电梯每次触发，到关门中间间隔15s，如果A按了电梯，等待15s电梯才会关门，但是15s内B按了电梯，那就要开始重新计时。

        使用场景：输入框中输入内容，进行联想查询。我们希望的是用户输完后进行查询，而不是用户输入过程中频繁查询。

        如果这里使用节流，例如用户输入了3个字或字符，进行联想查询时只是匹配了用户输入的第一个字或者字符，显然不对。但是如果使用防抖，在联想查询时进行匹配的是用户最后输入的内容，符合实际。

function debounce(func, delay){
    let timer = null
    return function(...args){
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            func.apply(this,args)
        }, delay)
    }
}

二，节流

        规定时间内多次执行，只执行第一次

        有比喻：电梯每次触发，到关门中间间隔15s，如果A按了电梯，等待15s电梯才会关门，在这15s内不管有没有人按下电梯，到15s的时候都会关门。

        使用场景：页面无限加载的过程中，滑到底部自动加载。

        假设允许间隔15s，用户在这15s又往上滚动了一点，如果这里使用防抖，用户得在最后一次滑到底部，保持在底部的动作，才会去加载下一页的数据，也就是说，用户才能有机会继续浏览数据，这种交互显然不友好。但是如果使用节流，用户只要滑到了底部，不管他是否又往上滑了，数据都在请求，当用户再次查看，数据可能就已经加载出来，节省了用户时间。

function throttle(func, delay){
    let timer = null
    return function(...args){
        if (timer) return
        timer = setTimeout(() => {
            func.apply(this, args)
            timer = null
        }, delay)
    }

总结

        本篇解释了什么是防抖和节流，以及什么场景下需要使用防抖和节流。如果有更好的解释，欢迎讨论~