Jquery 仅当JavaScript函数在设定的时间后不再运行时才运行该函数

我有一个输入，它控制一个元素的状态变化非常快。这会导致该元素在部分更改时闪烁

我试图存储这些状态更改，然后在设置的时间内（任意500毫秒）不提供任何更改来更改状态

我已经尝试使用下面的代码（与fiddle中的代码相同）中演示的超时来解决此问题：

如果您在小提琴中快速按1、2、1、2等键，则面部将保持片刻不闪烁，然后超时将持续并开始改变状态

这把小提琴模拟了这个问题

---

为了澄清这一点，我只希望在一段时间内没有任何东西试图改变它的状态时，该面才会发生变化。

您正在寻找的是一个被称为去公告函数的函数，下面是一个示例，其中包含一段代码（您就快到了）：

---

如您所见，您只需将超时分配给一个变量，该变量在每次启动函数时都会自动清除，然后再次启动计时器。这样可以确保只有在500毫秒内未触发函数时才会发生文本更改。

您正在寻找的函数称为取消公告函数，下面是一个示例，其中包含一段代码（您就快到了）：

如您所见，您只需将超时分配给一个变量，该变量在每次启动函数时都会自动清除，然后再次启动计时器。这样可以确保只有在500毫秒内未触发函数时才会发生文本更改。

这称为取消抖动。这就是所谓的去抖动。

var changingToHappy = false;

// Original no attempts to fix functions.
//var ifHappy = function () {
//  $("#face").text(':)');
//};
//
//var ifNotHappy = function () {
//  $("#face").text(':(');
//};

var ifHappy = function () {
  changingToHappy = true;
  setTimeout(function () {
    if (changingToHappy) {
      $("#face").text(':)');
    }
  }, 500);
};

var ifNotHappy = function () {
  changingToHappy = false;
  setTimeout(function () {
    if (!changingToHappy) {
      $("#face").text(':(');
    }
  }, 500);
};

$("#textBox").keypress(
  function (event) {
    if (event.which == 49) {
      ifHappy();
      $("#flickerFace").text(':)');
    }
    if (event.which == 50) {
      ifNotHappy();
      $("#flickerFace").text(':(');
    }
  }
);

//storage for timer
var notHappyTimer;

var ifNotHappy = function () {
  changingToHappy = false;

  //removes timer if event fires in less than 500ms
  clearTimeout(notHappyTimer);

  //resets it to attempt again in 500ms
  notHappyTimer = setTimeout(function () {
    if (!changingToHappy) {
      $("#face").text(':(');
    }
  }, 500);

};