javascript delay between function calls for each index in an array [closed]

Question

The Goal:

• Execute logic on each element in array.
• Wait X ms in between next execution.
• mouseover(#slider) pauses delay - If delay = 1000ms, and 300ms had passed, mouseout(#slider) would trigger resume counting down the remaining 700ms delay.
• After execution on last element, loop back to do it again - forever.

Here's a visual explanation:

var = s Array(1,2,3)

var x = s[1];   //get first element   
console.log(x); //do something to it
wait();         //START wait timer 1000ms

//------------> timer : 300ms
//------------> user  : mouseover (#slider) : pause timer
//------------> user  : waited 5000ms
//------------> user  : mouseout  (#slider) : resume timer
//------------> timer : 300ms --> still 700ms to go!
//------------> timer : 500ms
//------------> user  : mouseover (#slider) : pause timer
//------------> user  : waited 10000ms
//------------> user  : mouseout  (#slider) : resume timer
//------------> timer : 500ms --> still 500ms to go!

var x = s[2];   //get second element   
console.log(x); //do something to it
wait();         //START wait timer 1000ms

//------------> timer : 200ms
//------------> user  : mouseover (#slider) : pause timer
//------------> user  : onclick   (.slideButton1) : change index of array and clear timer
//------------> user  : waited 6000ms
//------------> user  : mouseout  (#slider) : resume timer
//------------> timer : 0ms --> still 1000ms to go!

var x = s[1];   //get first element   ( index was changed by clicking button )
console.log(x); //do something to it
wait();         //START wait timer 1000ms

// ... s[2] ... s[3] ...
//theres nothing else in the array, lets start back from s[1] again!

Solutions:

jQuery:

http://jsfiddle.net/zGd8a/8/

This solution came from a related post. The official source of this plugin can be found here.

Native JS:

http://jsfiddle.net/SyTFZ/4/

This Answer by Aadit M Shah was really helpful. He also goes into detail about Delta Timing and how it can be useful in similar cases.

New Goal:

Abstract up either of these methods to allow use for other things.

Answer 1

OK, now that you've completely simplified the question, here's a generic array iterator function that puts a delay between the iteration of each element of the array and it cycles forever until the callback function returns false:

function iterateArrayWithDelay(arr, delay, fn) {
    var index = 0;

    function next() {
        // protect against empty array
        if (!arr.length) {
            return;
        }

        // see if we need to wrap the index
        if (index >= arr.length) {
            index = 0;
        }

        // call the callback
        if (fn(arr[index], arr, index) === false) {
            // stop iterating
            return;
        }

        ++index;

        // schedule next iteration
        setTimeout(next, delay);
    }
    // start the iteration
    next();
}

And, for your example, you would use it like this:

iterateArrayWithDelay(s, 1000, myFunction);

Where you define myFunction to be a callback function that processes each element. The callback is passed three items:

myFunction(item, array, i){
    // your code here to process item
}

---

.delay() only works with jQuery methods that use the animation queue. In your code example, the .delay('1000') isn't doing anything since there are no jQuery animation methods after it on the same object.

As for memory leaks, it's hard to follow the overall context of what you're doing because we can't see the lifetime of the object represented by this and its properties. This sequence looks pretty odd:

var x = t.s[i];
...
delete t.s[i];
t.s.push(x);

In particular, I don't see how the delete statement is actually doing anything because you still have a reference to the contents in x so nothing will be garbage collected. Further, delete in javascript is used the get rid of an object property, not for freeing up an object or for removing an array element. To free up an object, you have to get rid of all references to that object (setting them to some other value so they no longer contain the reference or letting them go out of scope). Thus, since you're never getting rid of the reference to whatever is in t.s[i], nothing is getting freed.

---

Your use of setTimeout() is not causing recursion. When you call setTimeout(), it sets a timer and puts a function reference into a data structure that is associated with that timer. Then, the calling function continues to run and finishes it's execution. Thus, it's done executing before the setTimeout() fires and calls it again. So, it's not actually recursion. It's a bunch of sequential function calls, separated by a time interval and one finishes before the next can run (because javascript is single threaded and because the timer is set for the future).