JavaScript jQuery 延迟输入

Question

我有一个 html 表，它通过 jQuery Ajax 从数据库获取其值。 像这样的事情

<div id="tableId"></div>

比java脚本:

function showUser(rowsToShow) {
  request = $.get("showTableFunction.php", {
    q: rowsToShow
  });

  request.done(function(response, textStatus, jqXHR) {
    $("#tableId").html(response);
  });

  request.fail(function(jqXHR, textStatus, errorThrown) {
    console.log("The following error occurred: " + textStatus, errorThrown);
  });
}

该表有一个 oninput 函数，每次用户更改其中一个单元格的值时都会更新数据库。

function updateCell(data) {
  var cellId= data.id;
  var editValue = $(data).text();

  requestEdit = $.post("editCellFunction.php", {
    cellId: cellId,
    editValue: editValue,
  });

  requestEdit.done(function(response, textStatus, jqXHR) {
    console.log(textStatus);
    });

  requestEdit.fail(function(jqXHR, textStatus, errorThrown) {
    console.log("The following error occurred: " + textStatus, errorThrown);
  });

}

然而，这会给网站带来很大的负载。 所以我想添加一个延迟，只有在 5 秒内没有新输入时才会执行 Ajax 请求

非常感谢它有时可以帮助解决这个问题。

Answer 1

我实际上刚刚实现了一些非常相似的东西。基本上，您希望通过 setTimeout 设置一个计时器，该计时器在收到输入时启动并重置。

const input = document.getElementById('input');
const output = document.getElementById('output');
let timer = null;

function updateDatabase() {
  // your code here, but for this example, I'll just change some text.
  output.textContent = input.value;
}

function restartTimer() {
  clearTimeout(timer);
  timer = setTimeout(updateDatabase, 300);
}

input.addEventListener('input', restartTimer);

<input type="text" id="input">

<p>Sent:</p>
<p id="output"></p>