如何向 ajax 请求添加延迟以避免性能问题

Question

我有一个函数，它在输入时返回一定数量的 AJAX 触发数据。每次它都会去 Oracle DB 获取数据并显示输出。

但是，一旦我输入“你好，我的名字是”这样的“长”字符串，每次我输入一个键时它都会启动一个请求（一次 10 个请求），并且需要 5 秒才能得到 1请求响应。

这导致我的应用程序出现性能问题。请问我该如何避免呢？

我已经尝试过不起作用的动态和延迟。我正在使用 typeahead 2 (typeahead-bs2.min.js)。

$( "#customer_description" ).typeahead({

 dynamic: true,
 delay: 5000,
 source: function (query, process) {
      $.ajax({
           url: '/data/customer.php',
           type: 'POST',
           dataType: 'JSON',
           //contentType: "text/json; charset=utf-8",                        
           data: {
                       all: query,
                   },
            success: function(data) {
                //console.log(data);
                process(data);
            }
        });
    }
});

Answer 1

一旦用户停止输入，您可以在 1.5/2 秒间隔后触发请求，并按照Sami 的建议检查输入长度。

除此之外，为了避免发送多个请求，您始终可以中止前一个请求并发送一个新请求。

 var start = new Date()
 ,end, request;

 $('input:text').on('change', function(){
  end = new Date();
  var input = $(this).val();
  var diff = (end - start)/1000;

  //checking for a 1.5 sec delay and input length
  //You can adjust the delay time, I have kept it as 1.5seconds
  if(diff > 1.5 && input.length > 5){
    if (request !== undefined){
      //aborting the previous request
      request.abort();
    }
    start = new Date();

    //storing the ajax request in a variable so that it can be aborted later when we fire a new request

    request = $.ajax({
      url: '/data/customer.php',
      type: 'POST',
      dataType: 'JSON',
      //contentType: "text/json; charset=utf-8",                        
      data: {
      all: query,
      },
      success: function(data) {
               //console.log(data);
                 process(data);
              }
    });
   }
 });

Answer 2

如果我没记错的话，您是说您有类似搜索输入的东西会触发 Ajax 调用，并且您希望阻止该 Ajax，以便它不会在您按下的每个键时触发。我说的对吗？

类似：

    var timeOutId;
    $("#customer_description").typeahead({
        dynamic: true,
        source: function (query, process) {
            //if there's no ajax call running (the timeout was cleared)...
            if (!timeOutId || 'undefined' === typeof timeOutId) {
                timeOutId = setTimeout(ajaxCall, 300)
            }
        }
    });

    function ajaxCall() {
        $.ajax({
            url: '/data/customer.php',
            type: 'POST',
            dataType: 'JSON',
            //contentType: "text/json; charset=utf-8",                        
            data: {
                all: query,
            },
            success: function (data) {
                //console.log(data);
                process(data);
            },
            complete: function(){
              //when the ajax finishes (success or not) clear the interval
              clearTimeout(timeOutId);
            }
        });
    }

您可以通过“静态类”（具有函数的对象）或伪类来改进此代码，但这取决于您。通过这种方式，您可以更改标志或其他内容的超时时间，您可以添加字符串长度检查...或您能想到的任何内容。