javascript - 如何在到达时间设置之前覆盖 setTimeout？

Question

所以我正在使用 jquery 进行自动完成搜索。我必须在执行 ajax 函数之前设置一个延迟，因为我不想每次在文本框上键入时都调用我的服务器。这是我的代码:

function searchVendor() {
  setTimeout(searchVendor2, 5000);
}

function searchVendor2() {
  var search = $('#inputVendor').val();
  $.ajax({
    type: 'POST',
    url: '/getVendors',
    data: {search: search},
    dataType: 'json',
    success: function(s) {
      $('#inputVendor').autocomplete({source: s});
    }
  });
}

所以函数searchVendor被执行onkeyup

<input type="text" class="form-control input-sm" id="inputVendor" onkeyup="searchVendor()">

如果我键入 3 个字符(例如 sas)，那么函数 searchVendor2 将执行 3 次。 5 秒延迟有效，但它没有停止并覆盖之前的 setTimeout。

我想要发生的是，如果我在文本框中键入一个字符，它将在 5 秒后执行，但是!如果在 5 秒之前键入新字符，setTimeout 将再次重置为 5 秒。只要用户在文本框上键入，setTimeout 就会重置为 5 秒，并且只有在 5 秒过后用户没有再次键入时才会执行。

感谢那些能提供帮助的人!

Answer 1

首先，您需要将您的超时 ID 保存在一个全局变量中，或者保存在一个变量中，以便稍后再次调用该函数时可以访问该变量。

现在，无论何时调用您的函数，如果超时存在，您首先清除该超时。因此，您可以清除任何预先存在的超时并在每次调用该函数时设置一个新超时。

var myTimeout;

function searchVendor() {
  clearTimeout(myTimeout);
  myTimeout = setTimeout(searchVendor2, 5000);
}

function searchVendor2() {
  var search = $('#inputVendor').val();
  $.ajax({
    type: 'POST',
    url: '/getVendors',
    data: {search: search},
    dataType: 'json',
    success: function(s) {
      $('#inputVendor').autocomplete({source: s});
    }
  });
}