超时循环功能

Question

I want to have two functions (an animation downwards and animation upwards) executing one after the other in a loop having a timeout of a few seconds between both animations. But I don't know how to say it in JS …

Here what I have so far:

Function 1

// Play the Peek animation - downwards
function peekTile() {
    var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]);

    // Reposition tiles to their desired post-animation position
    tile1.style.top = "-150px";
    tile2.style.top = "-150px";

    peekAnimation.execute();
}

Function 2

// Play the Peek animation - upwards
function unpeekTile() {
    var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]);

    // Reposition tiles to their desired post-animation position
    tile1.style.top = "0px";
    tile2.style.top = "0px";

    peekAnimation.execute();
}

And here's a sketch how both functions should be executed:

var page = WinJS.UI.Pages.define("/html/updateTile.html", {
    ready: function (element, options) {

    peekTile();
    [timeOut]
    unpeekTile();
    [timeOut]
    peekTile();
    [timeOut]
    unpeekTile();
    [timeOut]

    and so on …
    }
});

Answer 1

You can do this using setTimeout or setInterval , so a simple function to do what you want is:

function cycleWithDelay() {
    var delay = arguments[arguments.length - 1],
        functions = Array.prototype.slice.call(arguments, 0, arguments.length - 1),
        pos = 0;
    return setInterval(function () {
        functions[pos++]();
        pos = pos % functions.length;
    }, delay);
}

Usage would be like this for you:

var si = cycleWithDelay(peekTile, unpeekTile, 300);

and to stop it:

clearInterval(si);

This will just cycle through the functions calling the next one in the list every delay msec, repeating back at the beginning when the last one is called. This will result in your peekTile , wait, unpeekTile , wait, peekTile , etc.

If you prefer to start/stop at will, perhaps a more generic solution would suit you:

function Cycler(f) {
    if (!(this instanceof Cycler)) {
        // Force new
        return new Cycler(arguments);
    }
    // Unbox args
    if (f instanceof Function) {
        this.fns = Array.prototype.slice.call(arguments);
    } else if (f && f.length) {
        this.fns = Array.prototype.slice.call(f);
    } else {
        throw new Error('Invalid arguments supplied to Cycler constructor.');
    }
    this.pos = 0;
}

Cycler.prototype.start = function (interval) {
    var that = this;
    interval = interval || 1000;
    this.intervalId = setInterval(function () {
        that.fns[that.pos++]();
        that.pos %= that.fns.length;
    }, interval);
}

Cycler.prototype.stop = function () {
    if (null !== this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null;
    }
}

Example usage:

var c = Cycler(peekTile, unpeekTile);
c.start();

// Future
c.stop();

Answer 2

You use setInterval() to call unpeekTile() every 1000 milliseconds and then you call setTimeOut() to run peekTile() after 1000 milliseconds at the end of the unpeekTile() function:

function peekTile() {
    var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]);

    // Reposition tiles to their desired post-animation position
    tile1.style.top = "-150px";
    tile2.style.top = "-150px";

    peekAnimation.execute();
}

function unpeekTile() {
       /* your code here */
     setTimeout(peekTile, 1000);
}

setInterval(unpeekTile, 1000);

Answer 3

Check out the fiddle

var animation  = (function () {
     var peekInterval, unpeekInterval, delay;
     return {
          start: function (ip) {
              delay = ip;
              peekInterval = setTimeout(animation.peekTile, delay);
          },
          peekTile: function () {
             //Your Code goes here
             console.log('peek');
             unpeekInterval = setTimeout(animation.unpeekTile, delay);
          },
          unpeekTile: function () {
            //Your Code goes here
            console.log('unpeek');  
            peekInterval = setTimeout(animation.peekTile, delay);
          },
          stop: function () {
              clearTimeout(peekInterval);
              clearTimeout(unpeekInterval);
          }
    }
         })();
animation.start(1000);
// To stop

setTimeout(animation.stop, 3000);

​ I can't use this instead of animation.peekTile as setTimeout executes in global scope