只有 运行 一个 JavaScript 功能，如果它在一定时间后没有再次 运行

Question

我有一个控制元素状态变化非常快的输入。这会导致该元素随着它的一部分发生变化而闪烁。

我正在尝试存储这些状态变化，然后在设定的时间（任意 500 毫秒）内没有任何变化来改变状态。

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

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

如果您在 fiddle 中快速按 1、2、1、2 等，面部将暂时不闪烁，然后超时将赶上并开始改变状态。

这个fiddlehttp://jsfiddle.net/9w70wxgz/4/模拟了这个问题

澄清一下，如果在设定的时间内没有任何尝试改变其状态，我只希望面部发生变化。

Answer 1

您正在寻找的是去抖动函数，这是一个包含您的一段代码的示例（您快完成了）：

//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 毫秒内被触发时才会发生文本更改。