javascript - jQuery/JS setTimeout() 在调用 clearTimeout() 后仍然运行

Question

我有一个 input type="number" 并使用字段中的向上/向下箭头来更改输入的值。我想在输入的最终点击/更改后触发一个函数。

final 我的意思是在输入未更改 1000 毫秒后(我假设用户现在已停止点击)。

我已经设置了一个 1000 毫秒的 setTimeout() 来运行该函数，但即使我正在调用 clearTimeout() .on('change ') 的输入，函数在 第一次 更改后运行 1000 毫秒，而不是最后一次。

我设置了一个简单的 JSFiddle来说明我的意思。带有“Hello World!”的 div在最后一次点击之前，它不应该出现。

如果您快速单击输入上的向上箭头(至少每 999 毫秒一次)，则 div 永远不会出现。

我在这里查看了很多其他类似的问题，但它们几乎都是关于计时器变量的范围的，我认为这在这里不适用。

我做错了什么？

Answer 1

onchange，当输入失去焦点时触发，尝试输入..顺便说一句。这里不需要 jquery。

var timeOut;
document.getElementById("foo").addEventListener("input", function() {
  clearTimeout(timeOut);
  timeOut = setTimeout(function() {
    document.getElementById("bar").style.display = "block";
  }, 1000);
});