使用setTimeout进行回调超时的Javascript模式？

Question

On page load I setup some functions and call the first one which is supposed to go through step by step.

after5Seconds();

function after5Seconds() {
  setTimeout(hideOne, 5000);
}
function hideOne() {
  $('.toggleme#one').fadeOut(showTwo);
}
function showTwo() {
  $('.toggleme#two').fadeIn('125', 'swing', startAllOver); 
}

I'm finding that often some callbacks get stalled and fail silently and i'm starting to update each to be more like:

• setTimeout to trigger the callback in N milliseconds if it hasn't already been triggered

Something like:

  function wrapMeInDelay(fn, timer) {
    var hasBeenCalled = false;
    var ctx = function() {
      if (hasBeenCalled) {
        return false;
      } else {
        hasBeenCalled = true;
        return fn();
      }
    };
    setTimeout(ctx, timer);
    return ctx;
  }

basically I want to start adding timeouts to the callbacks to make sure they are called if the jquery/whatever callback doesn't trigger it first.

Is there another more common way of doing this i'm not aware of?

Answer 1

If I understand you correctly, you want to call some function after X seconds only if this function is not already called?

var _timeout;
function onTrigger(){
  if (_timeout){
    clearTimeout(_timeout);
  };
  console.log("function triggered");
};
_timeout = setTimeout(onTrigger, 5000);
onTrigger();

You need to store in variable reference to that timeout, and when function is called, remove that timeout (clearTimeout). In that case timeout will not be executed.