Only run a JavaScript function if it is not run again after a set amount of time

问题

I have an input which controls the state of an element changing very rapidly. This causes that element to flicker as parts of it change.

I am trying to store these state changes and then providing nothing has changed for a set amount of time (an arbitrary 500ms) change the state.

I have tried to solve this using timeouts as demonstrated in the code below (the same code as in the 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(':(');
    }
  }
);

If you rapidly press 1, 2, 1, 2 and so on in the fiddle the face will remain not flickery for a moment and then the timeouts will catchup and it will begin to change state.

This fiddle http://jsfiddle.net/9w70wxgz/4/ simulates the problem.

To clarify I only want the face to change if nothing has tried to change its state for a set amount of time.

回答1:

What you're looking for is called a debounced function, here is an example with a piece of your code (you're almost there):

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

};

As you can see, you just assign the timeout to a variable that clears itself every time the function is fired, then starts the timer again. This ensures that the text change only happens if the function hasn't been fired in 500ms.

来源：https://stackoverflow.com/questions/28589322/only-run-a-javascript-function-if-it-is-not-run-again-after-a-set-amount-of-time

标签

jquery

javascript-events

javascript