Question

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

我正在尝试存储这些状态更改，然后在设定的时间内（任意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(':(');
    }
  }
);

如果您在小提琴中快速按1,2,2,2等等，脸部将暂时保持不闪烁，然后超时将会赶上并且它将开始改变状态。

这个小提琴http://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);

};

正如您所看到的，您只需将超时分配给每次触发该函数时自行清除的变量，然后再次启动计时器。这样可以确保仅在500ms内未触发该函数时才会发生文本更改。

如果在一段时间后没有再次运行，则只运行JavaScript函数

1 个答案: