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

Question

我有一个 input type="number" 并且正在使用字段中的 up/down 箭头来更改输入的值。我想在输入的 final click/change 之后触发一个函数。

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

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

我设置了一个简单的 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);
});

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

jQuery/JS setTimeout() still runs after clearTimeout() called

javascript

jquery

settimeout

cleartimeout