JavaScript jQuery 延迟输入答案

【问题标题】：JavaScript jQuery delay oninputJavaScript jQuery 延迟输入
【发布时间】：2019-12-10 04:40:09
【问题描述】：

我有一个 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 请求

如果能帮上忙，将不胜感激。

【问题讨论】：

Javascript 的 setTimeout( functionToCallAfterTimeout, timeoutInMs ) 应该适合你...

标签： javascript jquery html ajax

【解决方案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>

【讨论】：