JS的去抖、节流

去抖(debounce)

  在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

function debounce(fn, delay) {
    let timer = null;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, delay)
        }, delay);
    }
}

表现:

节流(throttle)

  规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。

function throttle(fn, delay) {
    let last_time = Date.now() - delay;
    return function() {
        let now = Date.now();
        if (now - last_time < delay) {
            return;
        }
        last_time = now;
        fn.apply(this, arguments)
    }
}

表现:

区别:

  去抖和节流十分相似,不一样的是,如果短时间内不断触发:
    去抖:停止触发时才去执行

    节流:只要过了delay,就会执行过了delay后的第一次触发

猜你喜欢

转载自www.cnblogs.com/amiezhang/p/10482098.html
今日推荐