JavaScript 函数节流的方法有哪些

JavaScript 函数节流是一种常用的性能优化手段，它的核心原则是限制一个函数在一定时间内只能执行一次。这样可以减少函数调用的频率、从而避免因频繁的操作而导致的浏览器响应变慢或页面卡顿。函数节流主要有两种实现方法：使用时间戳和使用定时器。使用时间戳的方法可以确保函数以固定的频率执行，而使用定时器方法则能保证函数在指定的周期结束时执行。

接下来，将详细描述使用时间戳的方法。此种方法的核心是记录上一次函数执行的时间，并与当前时间进行比较。如果当前时间与上次执行时间的差大于或等于指定的延迟时间，则可以执行函数，并更新上次执行时间。这种方式的优点是实时性较好，函数触发后会立即执行（如果满足执行条件的话），不会出现明显的延迟，这在需要快速响应用户操作时非常有用。

一、时间戳实现的节流函数

函数节流的实现可以通过闭包保存上一次执行时的时间戳。在函数每次调用时，通过比较当前时间和上次执行时间的差值与设定的阈值，决定是否执行目标函数。

function throttle(func, wAIt) {
    let previous = 0;
    return function() {
        let context = this, args = arguments;
        let now = +new Date();
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    };
}

在这段代码中，previous变量是使用闭包保存的上一次执行时间戳的变量，wait是调用者指定的时间间隔，当实际的间隔超过了这个值时，目标函数func便会被执行。

二、定时器实现的节流函数

定时器的方法则稍有不同，其核心原理是设置一个定时器，保证在指定的时间间隔后执行函数。如果在定时器执行之前再次触发了函数，则忽略此次触发。

function throttle(func, wait) {
    let timeout;
    return function() {
        let context = this, args = arguments;
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
                func.apply(context, args);
            }, wait);
        }
    };
}

在这段代码中，利用setTimeout函数来控制何时执行目标函数，timeout变量用于标记定时器的状态，并且它是在闭包中保存的，因此每次调用阻止函数时都可以访问它。

三、函数节流的应用场景

函数节流在实际编程中有着广泛的应用场景，最常见的场景包括窗口的重绘、大小调整事件、滚动事件、鼠标移动事件等。特别是在Web开发中，这些操作如果频繁触发且对应的事件处理函数执行复杂时，会造成界面的卡顿，甚至引发浏览器的崩溃。

例如，在窗口大小调整（resize）时采用节流技术：##

window.addEventListener('resize', throttle(function(){
    console.log('Window resizing');
}, 500));

每当窗口大小发生变化时，上述代码会打印消息，但受到节流函数的限制，打印的频率不会超过每500毫秒一次，避免了在窗口大小调整过程中频繁和不必要的重渲染。

四、函数节流的优化

虽然函数节流技术可以有效控制函数的执行频率，但在某些需要同时保证函数被延迟执行和定期执行的场景下，单一的时间戳或定时器方法可能会存在一定的局限性。这时，可以将时间戳和定时器的方法结合起来使用，以确保函数既能够在事件触发后立即执行，也能够保证在最后一次触发事件后还能再执行一次。

function throttle(func, wait) {
    let timeout, previous = 0;
    return function() {
        let context = this, args = arguments;
        let now = +new Date();
        let remaining = wait - (now - previous);
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
        } else if (!timeout) {
            timeout = setTimeout(() => {
                previous = +new Date();
                timeout = null;
                func.apply(context, args);
            }, remaining);
        }
    };
}

在这个优化版本中，remaining变量计算出距离下一次理论上应该执行函数的剩余时间，如果该时间小于等于零，或者计算出的时间跨度比延迟时间更长（这可能发生在系统时间被修改的情况），则说明可以立刻执行函数。否则，设置一个定时器来在剩余时间后执行函数。

通过结合时间戳和定时器的方法，可以进一步完善函数节流的策略，让函数执行的更加智能和灵活。这种方式保证了函数的及时执行，同时也避免了事件结束后的响应遗漏问题。

五、实际案例分析

在许多实际开发中，函数节流都起到了至关重要的作用，尤其是在处理诸如鼠标事件、动画等性能敏感的操作时。比如，当开发一个搜索建议功能时，用户在输入搜索关键字的过程中，如果对每一个键盘事件都向服务器发送请求，将会造成巨大的资源浪费和不必要的网络压力。

通过使用函数节流技术，可以限制这种情况下的请求频率，例如，仅在用户停止输入一段时间后才发送请求，从而大大减少了请求的数量，同时也提高了用户体验和应用性能。

// 假设有一个处理搜索的函数 searchForKeyword
function searchForKeyword(keyword) {
    // 执行搜索请求的操作...
    console.log('Searching for:', keyword);
}
// 绑定输入框的键盘输入事件，并应用节流函数
const searchInput = document.getElementById('search-input');
searchInput.addEventListener('input', throttle(function() {
    searchForKeyword(searchInput.value);
}, 1000));