js节流函数怎么写

一、JS节流函数的编写方法：

使用定时器、使用时间戳、结合定时器和时间戳。 其中，结合定时器和时间戳的方法最为常用，因为它能够在处理高频事件时更灵活地控制执行频率。节流函数的核心在于限制函数的执行频率，防止因高频率调用导致的性能问题。下面详细介绍结合定时器和时间戳的方法。

结合定时器和时间戳的节流函数方法可以通过以下步骤实现：

创建一个闭包，闭包中保存上一次执行函数的时间戳和一个定时器。
在事件触发时，获取当前时间戳。
判断当前时间戳减去上一次执行时间戳是否大于设定的间隔时间。
如果满足条件，则立即执行函数，并更新上一次执行时间戳。
如果不满足条件，则设置一个定时器，在间隔时间后执行函数。

下面是一个具体的实现示例：

function throttle(func, delay) {
    let lastExecutionTime = 0;
    let timer;
    return function(...args) {
        const context = this;
        const currentTime = Date.now();
        if (currentTime - lastExecutionTime >= delay) {
            clearTimeout(timer);
            lastExecutionTime = currentTime;
            func.apply(context, args);
        } else {
            clearTimeout(timer);
            timer = setTimeout(() => {
                lastExecutionTime = Date.now();
                func.apply(context, args);
            }, delay - (currentTime - lastExecutionTime));
        }
    };
}

二、节流函数的应用场景

1、滚动事件

在处理滚动事件时，页面滚动速度很快，如果在滚动过程中频繁触发事件处理函数，会导致页面性能下降。使用节流函数可以限制事件处理函数的执行频率，提高页面的流畅度。

window.addEventListener('scroll', throttle(() => {
    console.log('Scroll event triggered');
}, 200));

2、窗口调整大小事件

窗口调整大小事件在用户拖动窗口边缘时会频繁触发，如果在调整大小过程中执行复杂的计算，会导致页面卡顿。节流函数可以有效地减少执行次数，提高性能。

window.addEventListener('resize', throttle(() => {
    console.log('Resize event triggered');
}, 200));

3、按钮点击事件

在某些情况下，用户可能会快速多次点击按钮，导致事件处理函数被频繁执行。使用节流函数可以限制按钮点击事件的频率，防止因频繁点击导致的意外问题。

document.getElementById('myButton').addEventListener('click', throttle(() => {
    console.log('Button clicked');
}, 1000));

4、输入框内容变化事件

在处理输入框内容变化事件时，如果用户输入速度很快，会导致事件处理函数频繁执行。使用节流函数可以限制事件处理函数的执行频率，提高性能。

document.getElementById('myInput').addEventListener('input', throttle(() => {
    console.log('Input event triggered');
}, 500));

5、游戏动画

在游戏开发中，动画帧的更新频率很高，如果每帧都执行复杂的计算，会导致游戏卡顿。使用节流函数可以限制动画帧的更新频率，提高游戏性能。

function updateGameFrame() {
    console.log('Game frame updated');
}
setInterval(throttle(updateGameFrame, 1000 / 60), 1000 / 60);

三、节流函数的优势

1、提高性能

节流函数通过限制函数的执行频率，减少了不必要的计算和渲染，从而提高了页面的性能。在处理高频事件时，节流函数可以有效地降低CPU和内存的消耗，提高页面的响应速度和流畅度。

2、防止意外问题

在处理用户操作时，频繁触发事件处理函数可能会导致意外问题。例如，在按钮点击事件中，用户快速多次点击按钮可能会导致表单重复提交，使用节流函数可以有效地防止这种情况发生，确保事件处理函数只在合适的时间执行。

3、易于实现

节流函数的实现相对简单，只需要通过闭包保存上一次执行时间戳和定时器，并在事件触发时判断是否满足执行条件即可。结合定时器和时间戳的方法不仅简单易懂，而且可以灵活地控制函数的执行频率，适用于各种高频事件的处理。

四、节流函数的改进

虽然结合定时器和时间戳的方法已经能够很好地实现节流功能，但在某些情况下可能还需要进一步改进。例如，在处理窗口调整大小事件时，如果用户快速拖动窗口边缘，然后立即停止，可能会导致最后一次事件处理函数没有执行。为了解决这个问题，可以在节流函数中添加一个立即执行选项。

1、立即执行选项

通过在节流函数中添加一个立即执行选项，可以控制函数在事件第一次触发时立即执行，而不是等待设定的间隔时间。这样可以确保在用户停止操作后，最后一次事件处理函数能够立即执行。

function throttle(func, delay, immediate = false) {
    let lastExecutionTime = 0;
    let timer;
    return function(...args) {
        const context = this;
        const currentTime = Date.now();
        if (immediate && currentTime - lastExecutionTime >= delay) {
            clearTimeout(timer);
            lastExecutionTime = currentTime;
            func.apply(context, args);
        } else {
            clearTimeout(timer);
            timer = setTimeout(() => {
                lastExecutionTime = Date.now();
                func.apply(context, args);
            }, delay - (currentTime - lastExecutionTime));
        }
    };
}

2、取消执行选项

在某些情况下，可能需要在事件触发后取消函数的执行。例如，在处理滚动事件时，如果用户快速滚动页面，然后立即停止滚动，可能希望取消未完成的事件处理函数。为此，可以在节流函数中添加一个取消执行选项，通过调用取消函数来清除定时器。

function throttle(func, delay) {
    let lastExecutionTime = 0;
    let timer;
    function throttled(...args) {
        const context = this;
        const currentTime = Date.now();
        if (currentTime - lastExecutionTime >= delay) {
            clearTimeout(timer);
            lastExecutionTime = currentTime;
            func.apply(context, args);
        } else {
            clearTimeout(timer);
            timer = setTimeout(() => {
                lastExecutionTime = Date.now();
                func.apply(context, args);
            }, delay - (currentTime - lastExecutionTime));
        }
    }
    throttled.cancel = function() {
        clearTimeout(timer);
    };
    return throttled;
}

五、节流函数与防抖函数的区别

在处理高频事件时，除了节流函数，防抖函数也是一种常见的优化方法。节流函数和防抖函数都能够限制函数的执行频率，但它们的实现原理和应用场景有所不同。

1、节流函数

节流函数通过限制函数的执行频率，确保函数在设定的间隔时间内最多执行一次。适用于处理高频事件，防止因频繁触发导致的性能问题。常见应用场景包括滚动事件、窗口调整大小事件、按钮点击事件等。

2、防抖函数

防抖函数通过延迟函数的执行时间，确保函数在设定的延迟时间后才执行。如果在延迟时间内再次触发事件，则重新计算延迟时间。适用于处理输入框内容变化事件、搜索框输入事件等，防止因频繁输入导致的性能问题。

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

3、应用场景对比

节流函数和防抖函数在不同的应用场景中各有优势。节流函数适用于限制函数的执行频率，确保在高频事件中保持较好的性能。而防抖函数适用于延迟函数的执行时间，确保在用户停止操作后才执行函数，防止因频繁输入导致的性能问题。

六、总结

通过对节流函数的详细介绍，我们了解了节流函数的实现方法、应用场景、优势以及与防抖函数的区别。结合定时器和时间戳的方法是实现节流函数的常见方式，不仅简单易懂，而且可以灵活地控制函数的执行频率，适用于各种高频事件的处理。

在实际开发中，合理使用节流函数和防抖函数可以有效地提高页面性能，防止因高频事件导致的性能问题。希望通过本文的介绍，能够帮助你更好地理解和使用节流函数，提高代码的质量和性能。

另外，在项目管理中，如果需要高效地协作和管理项目，可以考虑使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们能够帮助团队更好地协调工作，提高项目的成功率。