前端js防抖函数

防抖的作用

防抖是针对用户的高频操作的一种性能优化的策略，主要作用是减少程序执行次数（提升性能）、优化用户体验。常见的场景有：按钮click事件、窗口resize事件、scroll事件等。

防抖原理

给定一个时间周期，触发事件后开始计时，等待一个完整周期，周期内只执行一次事件处理函数。如果计时时间小于周期则重新计时，直到整个周期的时间完整过去。

防抖函数的实现（延迟版）

延迟版是在周期结束时执行，前面的时间不会执行：

    function debounce(fn, t = 1000) {//fn 事件处理函数 t 时间周期
        let timer = null;
        return function () {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(fn, t);
        }
    }
    function testFn() {
        console.log("延迟版")
    }
    window.addEventListener("scroll", debounce(testFn));

防抖函数的实现（前缘版）

前缘版是在周期开始时执行，后面的时间不会执行：

    function debounce(fn, t = 1000) {//fn 事件处理函数 t 时间周期
        let timer = null;
        return function () {
            if (timer) clearTimeout(timer);
            if (!timer) fn();
            timer = setTimeout(() => { timer = null }, t)
        }
    }
    function testFn() {
        console.log("前缘版")
    }
    window.addEventListener("scroll", debounce(testFn));

可配置版

        /*
        fn 执行函数
        time 间隔周期
        immediate 是否立即执行 true(前缘版) false(延迟版)
        */
        function debounce(fn, time = 1000, immediate = false) {
            let timer = null;
            return function () {
                if (timer) {
                    clearTimeout(timer);
                }
                if (immediate) {
                    if (!timer) fn();
                    timer = setTimeout(() => { timer = null }, time)
                } else
                    timer = setTimeout(fn, time);
            }
        }
        function logg() {
            console.log("kkkkk")
        }
        window.addEventListener("scroll", debounce(logg, 1000, true))