JavaScript中的防抖（debounce）和节流（thro

JavaScript中的防抖（debounce）和节流（throttle）是两种常用的技巧，用于控制函数的执行频率，特别是在处理用户输入或其他事件时非常有用。它们有助于提高性能并防止不必要的函数重复调用。

1. 防抖（Debounce）

防抖是确保函数在一定时间内只执行一次，而且只有在某个连续事件的结束后执行。这在处理输入事件（如搜索框输入）时非常有用，以减少请求或处理的频率。

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

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

    //使用示例
    const debounceFunction = debounce(() => {
        //执行需要防抖的操作
        console.info(Date.now())
    }, 300)
    var element = document.getElementById('keyword_txt')
    element.addEventListener('input', debounceFunction)

2. 节流（Throttle）

节流是确保函数在一定时间内以固定的时间间隔执行，无论事件有多频繁。这在需要限制函数的执行速率时非常有用，例如滚动事件。

下面是一个简单的JavaScript函数，实现了节流：

    function throttle(func, delay) {
        let canExecute = true;
        return function () {
            if (canExecute) {
                canExecute = false;
                func.apply(this, arguments)
                setTimeout(() => {
                    canExecute = true
                }, delay)
            }
        }
    }

    //使用示例
    const throttleFunction = throttle(() => {
        //执行节流操作
    }, 300)//时间间隔300ms

    element.addEventListener('scroll', throttleFunction)

防抖和节流是在不同场景下使用的，你可以根据需要选择其中一种技术来控制函数的执行频率。通常情况下，防抖用于处理连续的、快速触发的事件，而节流用于限制某个操作的执行速率。