JavaScript - delay a set of setTimeout activities

Question

I have a set of objects to be displayed at different times using setTimeout() function in JavaScript. What I did was to have a loop running, for every element I initialized a setTimeout event for itself.

The code I used to setTimeout for each element:

for (i = currentIndex; i < this.items.length; i++) {
    var object = "element#"+i;
    var delay = 10*i;
    this.keepDelay[id] = new Timer(function() {
                                $("#objectSet").css("display", "none").html(object).fadeIn("fast");
                                currentIndex = id;
                            }, delay);
}

The Timer class is

function Timer(callback, delay) {
    var timerId, start, remaining = delay;

    // works
    this.pause = function() {
        window.clearTimeout(timerId);
        remaining -= new Date() - start;
    };

    // works    
    this.resume = function() {
        start = new Date();
        id = currentIndex;
        timerId = window.setTimeout(callback, remaining);
    };

    // does NOT work
    this.speedup = function() {
        remaining -= 100;
        window.clearTimeout(timerId);
        timerId = window.setTimeout(callback, remaining);
    }

    // does NOT work
    this.slowdown = function() {
        remaining += 100;
        window.clearTimeout(timerId);
        timerId = window.setTimeout(callback, remaining);
    }

    this.resume();
}

The resume() and pause() methods do work. resume() attempts to display each object one after another depending on the delay value. pause() is self-explanatory. These two are working fine.

Now I want to speed up and slow down the delay of the objects, I try to write speedup() and slowdown() methods but somehow they wouldn't work.

Looking at the code I can't find why it wouldn't, maybe I've focused on it for too long so I need to seek help from a fresh mind.

http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — Arun P Johny, Oct 14 '14 at 08:10
You can't just operate on remaining to speed up or slow down. You have to calculate how much time has elapsed since the timer was started and work from there. — jfriend00, Oct 14 '14 at 08:15
@jfriend00 I still can't catch your point, can you explain it further more? — user3583721, Oct 14 '14 at 08:45
@user3583721 - I wrote an example of how to do it in an answer. — jfriend00, Oct 14 '14 at 08:52

jfriend00 · Accepted Answer · 2014-10-15T04:33:21.647

You need to calculate the time that has already elapsed so you can figure out how much to set a new timer for. Here's an example for .speedup():

this.speedup = function() {
    window.clearTimeout(timerId);
    var elapsed = new Date() - start;
    remaining-= elapsed + 100;
    if (remaining > 0) {
        this.resume();
    } else {
        callback();
    }
}

You would do something similar for .slowdown().

It occurs to me this could be done a little simpler:

this.speedup = function() {
    this.pause();
    remaining-= 100;
    this.resume();
}

this.slowdown = function() {
    this.pause();
    remaining+= 100;
    this.resume();
}

and, then you change this.resume() to this to make sure remaining doesn't go negative:

this.resume = function() {
    start = new Date();
    id = currentIndex;
    if (remaining > 0) {
        timerId = window.setTimeout(callback, remaining);
    } else {
        callback();
    }
};

@user3583721 - I added a little simpler version. – jfriend00 Oct 15 '14 at 04:34 — jfriend00, Oct 15 '14 at 04:34

JavaScript - delay a set of setTimeout activities

1 Answers1