js防抖与节流

js防抖的概念，什么是防抖

1.1 在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。

            function debounce(fn, wait=500){
                let timer = null
                return function() {
                    if (timer) {
                        clearTimeout(timer)
                    }
                    timer = setTimeout(() => {
                        fn.apply(this, arguments)
                    }, wait)
                }
            }
            function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll = debounce(showTop,1000) // 为了方便观察效果我们取个大点的间断值，实际使用根据需要来配置

代码说明：

1.每一次事件被触发，都会清除当前的 timer 然后重新设置超时调用，即重新计时。 这就会导致每一次高频事件都会取消前一次的超时调用，导致事件处理程序不能被触发；

2.只有当高频事件停止，最后一次事件触发的超时调用才能在delay时间后执行；

使用场景

1.2.1 边输入边检索，input输入框输入一段数据需要检测格式的时候

1.2.2 window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次

js节流的概念

规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，首先触发一次，在规定的时间里事件被中止，等超过设定的时间，又开始触发

代码演示：
    判断时间的距离是否大于等于默认的时间
    function throttle(fn, wait=500) {
        let nowTime = Date.now()
        return function () {
            let preTime = Date.now()
            let remaining = preTime - nowTime
            const _that = this
            if(remaining>= wait){
                fn.apply(_that, arguments)
                nowTime = preTime
            }
        }
    }
function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}
    function throttle(fun, delay =500) {
        let timer = null
        return function (args) {
            let that = this;
            let _args = arguments;
            if (timer) return
            timer = setTimeout(function() {
                fn.apply(that, _args)
                timer = null
            }, delay)
        }
    }

使用场景

(1)鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

(2)在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；

(3)监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；

总结

总结下防抖和节流的区别：

– 效果：

函数防抖是某一段时间内只执行一次；而函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

– 原理：

防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。

节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。

如有问题，欢迎指正。

参考： https://segmentfault.com/a/1190000018428170