前端面试题20（防抖函数）

news2024/10/5 14:29:02

在这里插入图片描述
在前端开发中，防抖（debounce）函数是一种常见的优化技术，用于控制函数的执行频率，避免在短时间内重复调用同一函数。这在处理如用户输入、窗口尺寸变化或鼠标移动等高频事件时特别有用，可以显著提升应用程序的性能和响应性。

下面列举了不同场景下的几种防抖函数实现方式，包括使用纯JavaScript、Lodash库，以及可配置的防抖函数：

1. 基础防抖函数

这是一个简单的防抖函数实现，它会在最后一次调用后的wait毫秒后执行函数：

function debounce(func, wait) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), wait);
    };
}

2. 立即执行防抖函数

此版本的防抖函数确保在一系列连续调用中，第一次调用会立即执行，而之后的调用则遵循防抖逻辑：

function debounce(func, wait, immediate = true) {
    let timeoutId;
    return function(...args) {
        const context = this;
        const later = function() {
            timeoutId = null;
            if (!immediate) func.apply(context, args);
        };
        const callNow = immediate && !timeoutId;
        clearTimeout(timeoutId);
        timeoutId = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

3. 使用 Lodash 的防抖函数

Lodash 库提供了一个现成的防抖函数，可以方便地使用：

import _ from 'lodash';

const debouncedFunction = _.debounce(function() {
    // 这里的函数体...
}, 300); // 300ms 是等待时间

4. 可配置的防抖函数

这个版本的防抖函数提供了更多控制，比如能够手动取消、追踪执行次数等：

class Debouncer {
    constructor(func, wait) {
        this.func = func;
        this.wait = wait;
        this.timeoutId = null;
        this.callCount = 0;
    }

    invoke(...args) {
        clearTimeout(this.timeoutId);
        this.timeoutId = setTimeout(() => {
            this.callCount++;
            this.func.apply(this, args);
        }, this.wait);
    }

    cancel() {
        clearTimeout(this.timeoutId);
        this.timeoutId = null;
    }

    getCallCount() {
        return this.callCount;
    }
}

const debouncedSearch = new Debouncer(searchFunction, 500);

5. 防抖函数的使用示例

假设有一个搜索函数，我们希望在用户停止输入后0.5秒执行搜索：

const searchInput = document.getElementById('search-input');
const searchFunction = function(query) {
    // 执行搜索逻辑
    console.log('Searching for:', query);
};

const debouncedSearch = debounce(searchFunction, 500);

searchInput.addEventListener('input', function(event) {
    debouncedSearch(event.target.value);
});