当前位置：首页 > news >正文

函数防抖和节流

news 来源：原创 2025/5/10 13:16:26

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，

如果在 n 秒内又触发了事件，则会重新计算函数执行时间，

短时间高频率触发只有最后一次触发成功

开发使用场景：搜索框防抖

fn代表要被防抖或者节流的函数，所以都是要执行的

var debounce = function (fn, t) {
    let timeOut;
    return function (...args) {
        //防抖在规定时间只会执行一次，频繁点击都会重新计时，所以每次都先清楚上一次的定时器
        clearTimeout(timeOut);
        timeOut = setTimeout(() => {
            fn(...args)
        }, t)
    }
}

// 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数

开发使用场景：

小米轮播图点击效果、鼠标移动、页面尺寸缩放 resize、滚动条滚动就可以加节流

function throttle(fn, delay) {
    let timeOut;
    return function (...args) {
        if (!timeOut) {
            timeOut = setTimeout(() => {
                //在 Node.js 中，它们都无法获取，必须使用 global。
                //globalThis 提供了一个标准的方式来获取不同环境下的全局 this 对象（也就是全局对象自身）。
                //不必担心它的运行环境。
                //全局作用域中的 this 就是 globalThis。
                console.log(this == globalThis) //true
                fn.apply(this, args)
                timeOut = null;
            }, delay)
        }
    }
}