如何触发延迟到用户暂停输入的 onkeyup 事件？

Question

我有一个文本区域，人们（自然地）在其中输入一些文本，我想这样做，以便不时发出 AJAX 请求以获取有关文本区域的一些建议（如堆栈溢出的相关问题，但对于文本区域，而不是文本输入）。问题是我不能在每次按键时都执行 AJAX 请求（这将是无用的并且非常消耗资源），而且我不确定最有效的方法是什么（每 X 个单词？每 X 秒？还是别的什么？）。

最好的方法是什么？

提前谢谢你。

Answer 1

您要查找的内容称为debouncing。这是原生 JavaScript 中的通用算法：

function debounce(fn, duration) {
  var timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(fn, duration)
  }
}

下面是一个如何将它与onkeyup 事件一起使用的示例：

function debounce(fn, duration) {
  var timer;
  return function(){
    clearTimeout(timer);
    timer = setTimeout(fn, duration);
  }
}

const txt = document.querySelector('#txt')
const out = document.querySelector('#out')
const status = document.querySelector('#status')

const onReady = () => {
  txt.addEventListener('keydown', () => {
    out.classList.remove('idle')
    out.classList.add('typing')
    status.textContent = 'typing...'
  })
  
  txt.addEventListener('keyup', debounce(() => {
    out.classList.remove('typing')
    out.classList.add('idle')
    status.textContent = 'idle...'
  }, 800))
}

document.addEventListener('DOMContentLoaded', onReady)

#wrapper{
  width: 300px;
}

input{
  padding: 8px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

#out{
  margin: 10px 0;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

.typing{
  background: #A00;
  color: #FFF;
}

.idle{
  background: #0A0;
  color: #FFF;
}

<div id="wrapper">
  <input id="txt" placeholder="Type here" />
  <div id="out">Status: <span id="status">waiting...</span></div>
</div>

Answer 2

如果您使用的是 lodash.js（或 underscore.js），您可以使用 debounce function。

示例（用于 keyup 的 jQuery）：

$('#myTextArea').keyup(_.debounce(function() {
  alert('hello');
}, 500));

Answer 3

如果您在网站上大量使用此功能并且不想跟踪所有 setTimeout 引用等，那么我将其打包成一个可用的插件here。

该插件为普通的 $.ajax 方法添加了一些选项，用于缓冲和取消以前的 ajax 调用。

Answer 4

另一种选择是使用一个名为bindWithDelay 的小型jQuery 插件。它使用与接受的答案相同的 setTimeout 技术，但透明地处理超时，因此您的代码更易于阅读。 source code可以在github上看到。

$("#myTextArea").bindWithDelay("keypress", doAjaxStuff, 1000)

Answer 5

您可以将keypress 事件处理程序与setTimeout 结合使用，这样您就可以在按键后的一段时间内发送Ajax 请求，如果在计时器完成之前发生另一个按键，则取消并重新启动计时器。假设你有一个 id 为 'myTextArea' 的 textarea 和一个名为 doAjaxStuff 的 Ajax 回调函数：

function addTextAreaCallback(textArea, callback, delay) {
    var timer = null;
    textArea.onkeypress = function() {
        if (timer) {
            window.clearTimeout(timer);
        }
        timer = window.setTimeout( function() {
            timer = null;
            callback();
        }, delay );
    };
    textArea = null;
}

addTextAreaCallback( document.getElementById("myTextArea"), doAjaxStuff, 1000 );

Answer 6

我个人会使用setInterval 来监视文本区域的更改，并且仅在检测到更改时执行 AJAX 回调。每一秒都应该足够快和足够慢。

Answer 7

如果您对 jQuery 解决方案感兴趣，jQuery Suggest 是一个很好的实现。

每次都重新发明轮子是没有意义的。