jquery - 如果在一定时间后没有再次运行JavaScript函数，则仅运行它

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

我正在尝试存储这些状态更改，然后在设定的时间段内（任意500ms）未更改任何状态。

我尝试使用超时来解决此问题，如以下代码所示（与小提琴相同的代码）：

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(':(');
    }
  }
);

如果快速按小提琴中的1、2、1、2等，脸部将保持片刻不闪烁，然后超时将开始变化，并开始改变状态。

这个小提琴http://jsfiddle.net/9w70wxgz/4/模拟了这个问题。

为了明确起见，我只希望如果在设定的时间内没有任何尝试改变其状态的方式来更改面部。

最佳答案

您要查找的是所谓的反跳函数，这是一个包含一段代码的示例（您快要准备好了）：

//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);

};

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