Question

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

我从第三方应用获取数据，因此我必须考虑它可以在我的应用中更改。

Answer 1

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

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

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

解决方案2：
在倍数发送之间添加（非常短但很好的数据库）延迟。像250/300 / 500ms这样的短路（取决于你和数据库之间的ping，或用户带宽）是非常值得注意的。 Delay documentation link here。值以毫秒（整数）表示示例：

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

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

Answer 2

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

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

节流：按下某个键时，会进行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([]);
        }
     });
  }

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

3 个答案: