防抖与节流

// 节流——高频事件触发,但在 n 秒内只会执行一次,所以节流会稀释函数的执 行频率。

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

            }
        }

    }
    const inputA = throttle(_ => { console.log('A') }, 1000)
    const inputB = debounce(_ => { console.log('B') }, 1000)

你可能感兴趣的:(javascriptes6)