阅读 665

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 函数节流

关注下面的标签,发现更多相似文章
评论