Question

我进行了一个有效的Ajax调用，该调用将每次输入更改发送一个值到端点。因此，如果用户正在键入，它将按击键发送呼叫。

我在其周围放置了setTimeout 2秒，这将延迟通话。但是问题在于它仍然会为每个击键发送呼叫。

我想到达2秒钟后，它发出一个呼叫，询问到目前为止输入的内容。如果用户再次输入，也许会再次设置。

我只是想发送较少的击键，并使其到达用户停止键入的位置，所以会稍有延迟和通话。

现在是电话：

$('#input').on('input', function() {
  let _this = $(this);


  if (_this.val() === '') {
    return;
  } else {

    const searchResult = $(this).val();
    console.log(searchResult);
    //if I type "PLANT" the console shows "P" "PL" "PLA" "PLAN" "PLANT"

    //after 2 seconds, send searchResult via ajax
    setTimeout(function () {
        $.ajax({ url: '/endpoint', 
          data: {
            search_result:searchResult
          },
          "_token": "{{ csrf_token() }}",
          type: "POST", 
          success: successHandler 

        });
    }, 2000);
  }
});

Answer 1

您应该对ajax调用进行反跳。这个想法是如果用户输入另一个值，超时将被清除。这样，ajax调用将仅在用户在给定的超时时间（对于您的情况为2秒）内停止键入后才进行一次。看起来像这样：

var timeout;

$('#input').on('input', function() {
  let _this = $(this);


  if (_this.val() === '') {
    return;
  } else {

    const searchResult = $(this).val();
    console.log(searchResult);
    //if I type "PLANT" the console shows "P" "PL" "PLA" "PLAN" "PLANT"

    if (timeout) {
      clearTimeout(timeout);
    }
    
    //after 2 seconds, send searchResult via ajax
    timeout = setTimeout(function () {
        $.ajax({ url: '/endpoint', 
          data: {
            search_result:searchResult
          },
          "_token": "{{ csrf_token() }}",
          type: "POST", 
          success: successHandler 

        });
    }, 2000);
  }
});

限制每个输入的ajax调用

1 个答案: