js防抖和节流的函数怎么写

防抖（Debounce）和节流（Throttle）是前端开发中两种常用的优化技术，用于限制高频率的事件触发。 防抖的核心思想是：在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。节流的核心思想是：在一定时间内只执行一次回调。以下是详细的解释和代码实现。

一、防抖（Debounce）

防抖的常见应用场景包括：输入框实时搜索、窗口大小调整、滚动事件等。

基本实现

防抖的基本实现如下：

function debounce(func, wait) {

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

详细解释

1. 定义一个变量 timeout：这个变量用于存储定时器的标识。
2. 返回一个新的函数：这个函数会在每次事件触发时被调用。
3. 清除之前的定时器：每次事件触发时，都会清除之前的定时器，确保只有最后一次事件触发后的 wait 时间后，回调函数才会被执行。
4. 设置新的定时器：在 wait 时间后执行回调函数。

二、节流（Throttle）

节流的常见应用场景包括：滚动事件、鼠标移动事件、窗口大小调整等。

基本实现

节流的基本实现如下：

function throttle(func, limit) {

    let lastFunc;
    let lastRan;
    return function(...args) {
        const context = this;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function() {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    }
}

详细解释

1. 定义两个变量 lastFunc 和 lastRan：lastFunc 用于存储最后一次的定时器，lastRan 用于存储最后一次执行回调的时间。
2. 返回一个新的函数：这个函数会在每次事件触发时被调用。
3. 立即执行回调函数：如果 lastRan 为空，说明这是第一次触发事件，立即执行回调函数，并记录当前时间。
4. 设置新的定时器：如果 lastRan 不为空，则设置一个新的定时器，确保在 limit 时间后执行回调函数。

三、防抖与节流的对比

相同点

1. 限制回调执行频率：防抖和节流都可以用来限制高频率的回调执行，避免性能问题。
2. 适用于高频事件：如滚动、输入、窗口调整等事件。

不同点

1. 执行时机：
   • 防抖：在事件停止触发 n 秒后执行回调。
   • 节流：在一定时间内只执行一次回调。
2. 适用场景：
   • 防抖：适用于用户输入、搜索框等需要在用户停止操作后再执行回调的场景。
   • 节流：适用于滚动、鼠标移动等需要限制回调执行频率的场景。

四、防抖与节流的实际应用

输入框实时搜索（防抖）

在输入框实时搜索的场景中，我们希望用户停止输入一段时间后再进行搜索请求，以减少不必要的请求。

const searchInput = document.getElementById('searchInput');

searchInput.addEventListener('input', debounce(function() {
    // 进行搜索请求
    console.log('Searching for:', this.value);
}, 300));

滚动事件（节流）

在滚动事件中，我们希望在一定时间内只执行一次回调，以减少滚动事件带来的性能问题。

window.addEventListener('scroll', throttle(function() {

    // 执行回调函数
    console.log('Scroll event triggered');
}, 100));

五、结合使用防抖与节流

在一些复杂的场景中，我们可以结合使用防抖和节流，以达到更好的效果。

例子：窗口大小调整

在窗口大小调整事件中，我们希望在用户调整窗口大小时，实时更新某些内容（使用节流），并在用户停止调整窗口大小后，再进行一些后续操作（使用防抖）。

window.addEventListener('resize', throttle(function() {

    // 实时更新内容
    console.log('Window resized');
}, 100));
window.addEventListener('resize', debounce(function() {
    // 用户停止调整窗口大小后的操作
    console.log('Window resize stopped');
}, 300));

六、推荐系统

在项目管理中，经常需要使用防抖和节流技术来优化用户界面和提升性能。对于项目团队管理系统，我们推荐以下两个系统：

1. 研发项目管理系统PingCode：PingCode 提供强大的项目管理功能，支持任务分配、进度跟踪、文档管理等，适合研发团队使用。
2. 通用项目协作软件Worktile：Worktile 是一款功能全面的项目协作软件，支持团队沟通、任务管理、日程安排等，适合各种类型的团队使用。

七、总结

防抖和节流是前端开发中常用的优化技术，用于限制高频率的事件触发。防抖的核心思想是：在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。节流的核心思想是：在一定时间内只执行一次回调。 通过合理使用防抖和节流技术，可以有效提升用户界面性能，改善用户体验。在项目管理中，我们推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，以便更好地管理团队和项目。

相关问答FAQs：

1. 什么是JS防抖和节流函数？

JS防抖和节流函数是一种优化JavaScript代码执行的技术。防抖函数可以确保在某个时间段内只执行一次函数，而节流函数可以确保在一定时间间隔内只执行一次函数。

2. 防抖函数的实现原理是什么？

防抖函数的实现原理是在事件触发后设置一个定时器，如果在定时器的时间间隔内再次触发了事件，则清除之前的定时器并重新设置一个新的定时器。只有在定时器的时间间隔内没有再次触发事件，才会执行函数。

3. 如何写一个JS防抖函数？

可以使用闭包和setTimeout函数来实现一个JS防抖函数。以下是一个简单的实现示例：

function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  };
}

以上是对于JS防抖和节流函数的一些常见问题的回答，希望能对您有所帮助。如果还有其他问题，请随时提问。