jQuery自动完成太多的数据库请求

Question

在jQuery ajax自动完成小部件中使用db数据时，如何解决对数据库的请求过多的问题？基本上每次用户插入一个字母时，脚本都会向数据库发出 ajax 请求，将 db 请求保持在最低限度的最佳实践是什么？

我从第三方应用程序获取数据，因此我必须考虑到它可能会在我的应用程序中发生变化。

Answer 1

几个月前我也遇到过同样的问题。
我找到了两个解决方案：

解决方案 1：
不要从输入的第一个字母开始查询。使用“minLength”自动完成属性。 minLength documentation here。添加该属性后，第一个查询将从 n 开始，其中 n 是先前键入的字母的数量（整数）。
示例：

$( ".selector" ).autocomplete({
    minLength: 3
});

解决方案 2：
在多次发送之间添加一个（非常短但对数据库很好）延迟。像 250/300/500 毫秒这样的短时间（取决于您与数据库之间的 ping 或用户带宽）确实是可观的。 Delay documentation link here。值以毫秒为单位（整数）。
示例：

$( ".selector" ).autocomplete({
    delay: 500
});

我希望它能满足您的需求。
不要犹豫，同时使用这两个。

Answer 2

您可以限制或消除请求。这些函数通常包含在 Lodash (https://lodash.com/docs/4.17.2#debounce) 等库中。

去抖动：当一个键被按下时，一个计时器启动。当计时器结束时，您进行 Ajax 调用。当在计时器期间按下另一个键时，计时器将重置。

Throttle：当一个键被按下时，会进行 Ajax 调用并启动一个计时器。当计时器运行时按下另一个键时，它会被忽略。

Answer 3

正如@Remq 所说，你可以试试这个

  $("your_selector").autocomplete({
     source: debounce(querySourceData, 1000),
  });

  function debounce(fn, delay) {
    var timer;
    return function() {
      var args = [].slice.call(arguments);
      var context = this;
      if (timer) {
        window.clearTimeout(timer);
      }
      timer = window.setTimeout(function() {
        fn.apply(context, args);
      }, delay);
    };
  };

  function querySourceData(request, response) {
     $.ajax({
        url: '/your_api',
        success: function(data = []) {
           response(data);
        },
        error: function() {
           response([]);
        }
     });
  }