JS防抖函数|极客笔记

JS防抖函数

在前端开发中，经常会遇到一些需要处理频繁触发的事件，比如窗口大小改变、页面滚动等。如果直接绑定事件处理函数，会导致事件频繁触发，造成性能上的浪费。为了解决这个问题，我们可以使用防抖函数。

什么是防抖函数

防抖函数是一种限制事件处理函数执行频率的方法，它将多次执行的函数合并成一次执行。当事件触发时，先清除之前的定时器，然后重新设置定时器，等待一段时间后执行函数。如果在这段时间内再次触发事件，就重新计时。

防抖函数实现

下面是一个简单的防抖函数的实现：

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

这个防抖函数接收两个参数，第一个是要执行的函数 func，第二个是延迟时间 delay。在内部使用 setTimeout 设置定时器，在 delay 毫秒后执行传入的函数。

防抖函数的应用场景

输入框搜索联想功能

在输入框中输入内容时，通常会触发 input 事件，当用户连续输入时，可能会频繁请求后端接口进行搜索。这时就可以使用防抖函数来减少请求次数，只在用户输入结束后再发送请求。

const searchInput = document.getElementById('searchInput');
searchInput.addEventListener('input', debounce(() => {
    // 发送搜索请求
}, 300));

窗口大小改变事件

窗口大小改变时会触发 resize 事件，如果直接绑定事件处理函数，可能会频繁调用导致性能问题。使用防抖函数可以延迟处理函数的执行，只在用户停止调整窗口大小后执行。

window.addEventListener('resize', debounce(() => {
    // 处理窗口大小改变事件
}, 300));

按钮防重复点击

在某些情况下，防止用户重复点击按钮可能是需要的。使用防抖函数可以确保按钮点击事件只会在一定时间内执行一次。

const submitBtn = document.getElementById('submitBtn');
submitBtn.addEventListener('click', debounce(() => {
    // 处理按钮点击事件
}, 300));

防抖函数的优化

上面的防抖函数实现虽然简单易懂，但是每次调用防抖函数都会创建一个新的定时器，如果事件频繁触发会导致频繁创建和清除定时器，效率较低。为了优化防抖函数，我们可以使用 immediate 参数来控制立即执行函数还是延迟执行。

下面是优化后的防抖函数实现：

function debounce(func, delay, immediate) {
    let timer;
    return function() {
        let context = this;
        let args = arguments;
        if (timer) clearTimeout(timer);
        if (immediate) {
            let callNow = !timer;
            timer = setTimeout(() => {
                timer = null;
            }, delay);
            if (callNow) func.apply(context, args);
        } else {
            timer = setTimeout(() => {
                func.apply(context, args);
            }, delay);
        }
    };
}

使用 immediate 参数可以控制首次触发事件时是立即执行函数还是延迟执行。如果设置为 true，则函数会在首次触发事件时立即执行，然后等待 delay 时间后才能继续执行。如果设置为 false，则函数会在最后一次触发事件后等待 delay 时间后执行。

防抖函数的实际应用

下面我们模拟一个实际的应用场景来演示防抖函数的使用。假设有一个页面中有一个搜索框，用户可以在输入框中输入搜索内容，然后通过 AJAX 请求向后端发送搜索请求。我们希望用户在输入结束后再发送请求，而不是每输入一个字母就发送一次请求。

<!DOCTYPE html>
<html>
<head>
    <title>Debounce Function Example</title>
</head>
<body>
    <input type="text" id="searchInput" placeholder="Enter keyword to search">
    <div id="result"></div>
    <script>
        function search() {
            let keyword = document.getElementById('searchInput').value;
            document.getElementById('result').innerText = `Searching for:  ${keyword}`; // 模拟发送 AJAX 请求 console.log(`Sending search request for$ {keyword}...`);
        }

        const searchInput = document.getElementById('searchInput');
        searchInput.addEventListener('input', debounce(search, 500));
    </script>
</body>
</html>

在这个示例中，用户在输入框中输入内容时，会触发 input 事件，然后调用 debounce 函数来限制触发函数的频率。在实际场景中，可以根据需要调整延迟时间来适应不同的业务需求。