# 防抖和节流

防抖和节流

函数防抖

1. 原理:当持续触发一个事件时，在n秒内，事件没有再次触发，此时才会执行回调；如果n秒内，又触发了事件，就重新计时
2. 适用场景：

search远程搜索框：防止用户不断输入过程中，不断请求资源，n秒内只发送1次，用防抖来节约资源
按钮提交场景，比如点赞，表单提交等，防止多次提交
监听resize触发时， 不断的调整浏览器窗口大小会不断触发resize，使用防抖可以让其只执行一次

         // 防抖
        function antiShakeFn(fn, wait = 500,) {
            let T = null
            return function (...arg) {
                if (T) {
                    clearTimeout(T)
                    T = null
                }
                T = setTimeout(() => {
                    fn(...arg)
                    clearTimeout(T)
                    T = null
                }, wait)

            }
        }

函数节流

1. 当频繁的触发一个事件，每隔一段时间， 只会执行一次事件。
2. 适用场景：

滚动事件触发函数时

        // 节流
        function throttleFn(fn, wait = 500,) {
            let T = null
            return function (...arg) {
                if (T) {
                    return
                }
                setTimeout(() => {
                    fn(...arg)
                    clearTimeout(T)
                    T = null
                }, wait)
            }


        }