Javascript 函数防抖

解读

函数防抖（debounce），指触发事件后在必定时间（好比 3 秒）内函数只能执行一次，若是这段时间（3 秒）内又触发了事件，则会从新计算函数执行时间。

分类

• 非当即执行版
• 当即执行版

非当即执行版

指触发事件后函数不会当即执行，而是在必定时间（好比 3 秒）后执行，若是这段时间（3 秒）内又触发了事件，则会从新计算函数执行时间。

// 0.1.1/debounce1.page.js
/** * @desc 函数防抖-非当即执行版 * @param {Function} callback * @param {Number} wait * * @return {Function} */
const debounce = (callback, wait = 3000) => {
    let timer;
    return function () {
        let ctx = this;
        let args = arguments;

        if (timer) {
            clearTimeout(timer)
        };

        timer = setTimeout(() => {
            callback.apply(ctx, args)
        }, wait);
    }
}

// 使用
console.log(new Date().toLocaleString());
console.log('-----');
const body = document.querySelector('body');
const btn = document.createElement('div');
btn.style = 'cursor: pointer; padding: 10px; background:red; border-radius: 5px; text-align: center; color:#fff;';
btn.innerHTML = '函数防抖非当即执行版默认 3 秒';
body.append(btn);

function callback() {
    console.log(new Date().toLocaleString());
}
btn.addEventListener('click', debounce(callback));
复制代码

当即执行版

指触发事件后函数会当即执行，而后必定时间（3 秒）内不触发事件才能继续执行函数的效果。

// 0.1.1/debounce2.page.js
/** * @desc 函数防抖-当即执行版 * @param {Function} callback * @param {Number} wait * * @return {Function} */
const debounce = (callback, wait = 3000) => {
    let timer;
    return function () {
        let ctx = this;
        let args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        let callNow = !timer;
        timer = setTimeout(() => {
            timer = null;
        }, wait);

        if (callNow) {
            callback.apply(ctx, args);
        }
    }
}

// 使用
console.log(new Date().toLocaleString());
console.log('-----');
const body = document.querySelector('body');
const btn = document.createElement('div');
btn.style = 'cursor: pointer; padding: 10px; background:red; border-radius: 5px; text-align: center; color:#fff;';
btn.innerHTML = '函数防抖当即执行版默认 3 秒';
body.append(btn);

function callback() {
    console.log(new Date().toLocaleString());
}
btn.addEventListener('click', debounce(callback));
复制代码

二者都兼容

// 0.1.1/debounce.page.js
/** * @desc 函数防抖-非当即执行版和当即执行版 * @param {Function} callback 回调函数 * @param {Number} wait 延迟毫秒数 * @param {Boolean} immediate true 当即执行 false 非当即执行 * * @return {Function} */
const debounce = (callback, wait = 3000, immediate = false) => {
    let timer;
    return function () {
        let ctx = this;
        let args = arguments;

        if (timer) {
            clearTimeout(timer)
        };

        if (immediate) {
            let callNow = !timer;
            timer = setTimeout(() => {
                timer = null;
            }, wait);
            if (callNow) {
                callback.apply(ctx, args)
            }
        } else {
            timer = setTimeout(() => {
                callback.apply(ctx, args);
            }, wait)
        }
    }
}

// 使用
console.log(new Date().toLocaleString());
console.log('-----');
const body = document.querySelector('body');
const btn = document.createElement('div');
btn.style = 'cursor: pointer; padding: 10px; background:red; border-radius: 5px; text-align: center; color:#fff;';
btn.innerHTML = '函数防抖非当即执行版和当即执行版默认 3 秒';
body.append(btn);

function callback() {
    console.log(new Date().toLocaleString());
}
btn.addEventListener('click', debounce(callback));
复制代码

你能够

上一篇：Javascript 函数节流