节流和防抖

节流

一段时间内多次触发事件,只执行第一次

    function throttle(fn, delay) {
        let valid = true
        return function (...params) {
            console.log(valid);
            if (!valid) {
                //休息时间 暂不接客
                return false
            }
            // 工作时间,执行函数并且在间隔期内把状态位设为无效
            valid = false
            fn.apply(null, params);
            setTimeout(() => {
                valid = true;
            }, delay)
        }
    }

防抖

一段时间多次触发事件,只执行最后一次

    function debounce(fn, delay) {
        let timer = null //借助闭包
        return function (...param) {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(function () {
                fn.apply(null, param);
            }, delay); // 简化写法
        }
    }
posted @ 2022-01-04 23:06  YIueil  阅读(35)  评论(0)    收藏  举报