Question

我有一个正常工作的javascript块，基本上可以接受用户输入，并且每次击键都会进行Ajax POST调用。

这很好用，但我想将其更改为仅在用户开始键入3秒钟后触发ajax，而不是每次击键。理想情况下，我想在3秒后将其触发，如果他们再次开始输入，它将重新开始，但是初始延迟是最重要的。

我试图围绕它设置一个间隔，但是没有进行ajax调用，所以我想知道是否需要采取其他方法。

如何在输入开始输入后3秒钟使此ajax调用？

$('#productInput').on('input', function() {

  let _this = $(this);
  let optSelector = `option[value='${_this.val()}']`;

  if (_this.val() === '') {

    return;

  } else if ($('#returnedProducts').find(optSelector).length) {

    //html stuff

  } else {

    const searchResult = $(this).val();
    $.ajax({ url: '/account/autocomplete', 
      data: {
        search_result:searchResult
      },
      "_token": "{{ csrf_token() }}",
      type: "POST", 
      success: function (response) {

        $("#returnedProducts").empty();
        var result = response.hits.hits;

        for (let i = 0; i < result.length; i++) {
          $("#returnedProducts").append($("<option/>",
            {
              //option stuff
            }
          ));
        }
      }
    });
  }
});

Answer 1

具有一个包含setTimeout的持久变量。输入时，清除当前超时（如果有），并设置另一个超时以在3秒内触发（除非发生另一个输入事件）。您也可以考虑将ajax调用（至少）放入其自己的函数中，以减少缩进：

let timeout;
$('input').on('input', () => {
  clearTimeout(timeout);
  console.log('timeout set');
  timeout = setTimeout(() => console.log('action running'), 3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>

let timeout;
$('#productInput').on('input', function() {
  clearTimeout(timeout);

  let _this = $(this);
  let optSelector = `option[value='${_this.val()}']`;
  if (_this.val() === '') {
    return;
  } else if ($('#returnedProducts').find(optSelector).length) {
    //html stuff
  } else {
    const searchResult = $(this).val();
    timeout = setTimeout(ajaxCall, 3000, searchResult);
  }
});

function ajaxCall(search_result) {
  $.ajax({
    url: '/account/autocomplete',
    data: { search_result },
    "_token": "{{ csrf_token() }}",
    type: "POST",
    success: successHandler
  });
}
function successHandler(response) {
  $("#returnedProducts").empty();
  var result = response.hits.hits;
  for (let i = 0; i < result.length; i++) {
    $("#returnedProducts").append($("<option/>", {
      //option stuff
    }));
  }
}

Javascript，3秒后拨打Ajax

1 个答案: