防抖节流

防抖函数和节流函数涉及到函数柯里化

函数柯里化:https://captaintwo.com/archives/function-currying

防抖函数

防止抖动,单位时间内事件触发会被重置,避免事件被误伤触发多

/**
 * 防抖函数 
 * 防止抖动,单位时间内事件触发会被重置,避免事件被误伤触发多
 */
const debounce = (callback = () => { }, timeout = 1000) => {
    let timer = null;
    return () => {
        if (timer) clearTimeout(timer);
        timer = setTimeout(callback, timeout);
    }
}

// 示例
let index = 1;
let callback = debounce(() => console.log(Date.now(), ': execute'), 2000);
let interval = setInterval(() => {
    index += 1;
    callback();
    if (index === 3) clearInterval(interval);
}, 1000);

节流函数

控制流量,单位时间内事件只能触发一次

/**
 * 节流函数
 * 控制流量,单位时间内事件只能触发一次。
 * 规定时间内触发只一次
 */
const throttle = (callback = () => { }, interval = 1000) => {
    let last = 0;
    return function () {
        let now = Date.now();
        if (last === 0 || now - last >= interval) {
            last = now;
            let args = Array.prototype.slice.call(arguments);
            callback.apply(this, args);
        }
    }
};

// 示例
let index = 1;
let callback = throttle(() => console.log(Date.now(), ': execute'), 2000);
let interval = setInterval(() => {
    index += 1;
    callback();
    if (index === 3) clearInterval(interval);
}, 1000);

防抖和节流的区别

  • 防抖函数 - 规定时间内触发最后一次,就是在一段时间内,前面的事件会被重置,直到最后一次才会触发

  • 节流函数 - 规定时间内仅仅触发一次,就是在一段时间内,事件触发了第一次后,都不会再触发了,直到时间重置

防抖函数和节流函数涉及到函数柯里化

函数柯里化:https://captaintwo.com/archives/function-currying

文章作者: CaptainTwo
本文链接:
版权声明: 本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 CaptainTwo
前端 NodeJs JavaScript
喜欢就支持一下吧