Javascript 有没有一种方法可以在更改API调用时限制过滤组合框？

我已经在我的应用程序中实现了一个过滤下拉列表，但是，这个下拉列表中填充的数据是分页的，因为它是一个巨大的数据集，所以在每个字符输入时，都会触发一个API调用，这对性能不是很好，有没有已知的方法来解决这个问题？

---

我正在使用react，因此任何react特定的或普通的js方法都适用于我的情况。

您可以使用去抖动功能，例如我用于去抖动调整大小事件的功能，但它在文本输入更改事件上的作用相同

/**
 * @description Postpones executing a callback function by a specified time until all the callback's events, occurring in rapid succession, have ended.
 * 
 * @param {number} delay - The time in milliseconds to postpone the callback.
 * @param {Function} callback - The event's callback function.
 * @return {Function} 
 * @public
 * @function
 * 
 * @example
 * 
 * const resizeHandler = (event) => console.log(event);
 * window.addEventListener("resize", debounce(200, resizeHandler));
 * 
 */
const debounce = (delay, callback) => { 

    let timer;

    return (...args) => {

        if (timer) {

            clearTimeout(timer);
        }

        timer = setTimeout(() => {

            callback(...args);
            timer = null;
        }, delay);
    };
};

[编辑]对于一对完整的轮胎，如果有人发现它有用处，这里是我的油门功能

/**
 * @description Delays the frequency of a callback function by a specified time.
 * 
 * @param {number} delay - The time in milliseconds to delay the callback frequency.
 * @param {Function} callback - The event's callback function.
 * @return (Function)
 * @public
 * @function
 * 
 * @example
 * 
 * const mouseMoveHandler = (event) => console.log(event);
 * document.body.addEventListener("mousemove", throttle(200, mouseMoveHandler));
 * 
 */

export const throttle = (delay, callback) => {

    let previousTime = 0;

    return (...args) => {

        const currentTime = new Date().getTime();

        if (currentTime - previousTime > delay) {

            previousTime = currentTime;

            return callback(...args);
        }
    };
};

---

在

css tricks.com

上有一篇关于

throttling

和

debouncing

的好文章，因此我建议您仔细研究这两个概念，并在代码中实现其中一个，这取决于哪一个更适合-@goto1这是非常有用的信息，谢谢您这正是解决我问题的方法，我不知道这个概念本身，谢谢你的信息，不客气。如果有人觉得它有用，我也在答案中添加了我的节流功能，因为这两个函数经常相互比较，但用途略有不同。@1978年的一个问题是，我想知道如何在去Bounced方法中添加一个参数，也就是说，如果debouncing方法中的注释中提到的resizeHandler方法使用了一些参数，我如何传递它呢？@user1712638有几种方法可以做到这一点，但我建议您使用Function方法。在

thisArg

之后传递的任何参数都将在

事件

对象之前的处理程序参数中加上前缀。例如，如果希望将一些文本与resize方法一起传递，可以这样做：

constresizehandler=（问候语，事件）=>console.log（问候语，事件）；addEventListener（“resize”，debounce（200，resizeHandler.bind（null，“hello world”））