Javascript：触发一个在几秒钟内发生的事件，但如果另一个事件发生则能够取消该事件？答案

【问题标题】：Javascript: Trigger an event that happens in a few seconds, but be able to cancel that event if another event happens?Javascript：触发一个在几秒钟内发生的事件，但如果另一个事件发生则能够取消该事件？
【发布时间】：2010-12-15 11:35:43
【问题描述】：

免责声明：我不是 Javascript 专家，所以我什至不确定我是否正确地处理了这个问题......

我希望能够在 Javascript 中触发一个事件，但如果另一个事件发生时能够取消该事件。所以，我想要完成的是：

用户开始在文本框中输入内容。
当文本框内容发生变化时，触发一个进行 AJAX 调用的事件
但是，如果用户继续输入，请取消该事件，因为我不想在他们完成输入之前进行查询

即如果用户正在输入“foobar”，我不想在他们完成输入之前进行 AJAX 搜索。我没有理由这样做：

AJAX("f") 然后 AJAX（“佛”）然后 AJAX（“富”）然后 AJAX（“傻瓜”） ...

当他们完成打字时我本可以打一个电话 AJAX("foobar")

...我说得有道理吗？还是有更好的方法来解决这个问题？

哦，然后是踢球者：我想避免使用 JQuery/Prototype，而只使用直接的 javascript 来做到这一点……哎呀！

【问题讨论】：

我相信你正在寻找这个：stackoverflow.com/questions/1620602/…

标签： javascript ajax events

【解决方案1】：

你想在按键上做的是

if(myTimeout)
   window.clearTimeout(myTimeout);

var myTimeout = window.setTimeout(function() {
   alert('one second has passed without any keypress');
}, 1000);

【讨论】：

【解决方案2】：

如果你不想使用框架，你可能想看看像 Matt Kruse's 这样的独立 AJAX 库。

我认为可以中止 AJAX 请求。但是，每次按键时启动和中止请求对我来说听起来很可怕。

我会选择另一条路：

在发送请求之前等待一段时间（检查输入的值是否从那时起发生了变化，如果没有，则发出请求）
让每个 Ajax 请求成功通过，但将每个请求标记为它是针对哪个输入值进行的。只有当输入的当前值和请求的标记相同时，才执行您的操作并显示结果。否则，你悄悄地放弃结果。

【讨论】：

抱歉，您的方法会导致请求过多。超时方法要经济得多。不得不对此投反对票，因为它太麻烦了。
我建议超时。上面的超时解决方案还没有说明如何处理用户在 1000 毫秒后再次开始输入。
没错，我太苛刻了。删除反对票。但是，您的方法仍然执行许多不必要的功能。在我看来，取消后续按键事件的超时更聪明。
嗯，“投票太旧，无法更改。”仅当您编辑答案时，我才能撤消我的反对意见。
已编辑。我不确定该方法是否执行了太多功能 - 如果用户停止输入，则会发送请求。如果用户在请求结束时开始输入，您是否要中止其中的每一个？我赞成让它们在启动后运行，而不是中止它们，这是唯一的区别。

【解决方案3】：

类似这样的：

var to = null; //the timeout
function doStuffWithContents(){
   //code that does the ajax goes here
}

document.getElementById('the_textarea').onkeyup = function(){
  if (to) {
    window.clearTimeout(to);
  }
  to = window.setTimeout("doStuffWithTheContents()",1000); //1000 = one second
}

【讨论】：