防抖与节流

Posted 2021-09-16 一个大秤砣

防抖与节流

 // 节流——高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执 行频率。
        function throttle(fn, timer) {
            // 初始化标识为true，并使用闭包缓存起来
            let flag = true
            return (...args) => {
                if (flag) {
                    fn(...args);
                    // 执行一次事件后将标识标记为false
                    flag = false
                    setTimeout(_ => {
                        // 延时一定时间后将标识标记为true
                        flag = true
                    }, timer)
                }
            }
        }
        // 防抖——触发高频事件后 n 秒后函数只会执行一次，如果 n 秒内高频事件再 次被触发，则重新计算时间；
        function debounce(fn, timer) {
            let flag = true, timeout = null
            return (...args) => {
                // 实现延时执行方法
                const setTimeoutFn = _ => {
                    timeout = setTimeout(_ => {
                        fn(...args)
                        // 完整执行一次延时事件后，使标记改为true
                        flag = true
                    }, timer)
                }
                if (flag) {
                    flag = false
                    // 第一次触发事件，调用延时方法
                    setTimeoutFn()
                } else {
                    // 当用户触发事件之后连续触发时，清除掉之前的定时器，重新计时。
                    clearTimeout(timeout)
                    setTimeoutFn()

                }
            }

        }
        const inputA = throttle(l => { console.log(l) }, 1000)
        const inputB = debounce(l => { console.log(l) }, 1000)