Javascript:创建一个类似对象的缓冲区，用于收集输入的击键，然后按时间间隔将它们逐个释放到函数

Question

例如，当使用 Google Maps/Places Autocomplete Service API 时，在输入字段中进行的每次击键都会触发自动完成的请求功能，我发现如果在一个非常短的时间内进行过多的击键短时间内，自动完成请求无法返回结果。因此，我想创建某种缓冲区来收集所有击键，然后一个接一个地以 200ms 间隔将它们释放到自动完成功能。

因此输入 123 Fake St 需要 700 毫秒，然后以 200 毫秒的间隔将字符串的每个字符传递给函数 - 1 (200ms) 2 (200ms) 3 (200ms) F (200ms) A ... ect.

我目前对如何编写这样的东西没有明确的想法，所以不能发布代码，但我原以为它会是这样的

On key press:

    if( (lastRequestTime - 200) > curTime )
        send input to function

然而，这显然远未完成。有没有人对如何实现这一点有任何想法？

Answer 1

您需要在输入上使用 onkeydown 事件(如您所示)。或者在某些浏览器中，您可能需要将事件放在主体上，然后等待元素上的焦点事件。我能给出的一个主要智慧是时间模式。您应该设置一个接收 key 并处理发送它们的队列对象。基本上它应该有一个名为“就绪”的 bool 在创建时设置为 true，然后每当它获得一个新 key 时，如果它准备好了，它会立即发送它。但如果不是，它将把它添加到队列中(通常是一个数组)。每当你让它发送一个 key 时，只需设置一个超时，如果有人在那里或只是设置为 true，就会触发另一个发送(在队列中的下一个 key 上)。

警告:不是技术上有效的 javascript。主要是一个例子。

takeKey( key )
{
  if ( this.ready )
    this.sendIt( key );
  else
    this.queue.push( key );
}

sendIt ( key )
{
  this.ready = false;
  send( key );
  timeout(function () {
    this.readyUp();    
  }, time);
}

readyUp ()
{
  ready = true;
  if (this.queue.length > 0)
    this.sendIt( this.queue.shift() );
}

这应该会处理您的时间安排。剩下的只是基本的 dom 编码。

附言检查称为 throttle 的东西是你的自动完成小部件的文档。该解决方案可能会直接烘焙。