1

2 つの関数 (下向きのアニメーションと上向きのアニメーション) を、両方のアニメーションの間に数秒のタイムアウトがあるループで次々に実行したいと考えています。でも、JSでどう言えばいいのかわからない…</p>

ここに私がこれまでに持っているもの：

機能 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();
}

機能 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();
}

そして、これは両方の機能がどのように実行されるべきかのスケッチです:

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

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

    and so on …
    }
});
4

3 に答える 3

1

setTimeoutまたはを使用してこれを行うことができるsetIntervalため、必要なことを行う簡単な関数は次のとおりです。

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

使用法は次のようになります。

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

そしてそれを止めるには：

clearInterval(si);

delayこれは、リスト内の次の関数をミリ秒ごとに呼び出す関数を循環し、最後の関数が呼び出されたときに最初に戻ります。これにより、、peekTilewait、、、waitなどが発生します。unpeekTilepeekTile

自由に開始/停止したい場合は、おそらくより一般的なソリューションが適しています。

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;
    }
}

使用例:

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

// Future
c.stop();
于 2012-06-30T07:03:51.360 に答える
0

1000 ミリ秒ごとsetInterval()に呼び出してから、関数の最後で 1000 ミリ秒後に実行するように呼び出します。unpeekTile()setTimeOut()peekTile()unpeekTile()

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);
于 2012-06-30T06:57:36.640 に答える
-2

フィドルをチェックしてください 

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

グローバル スコープで実行さthisれるため、animation.peekTile の代わりに使用することはできませんsetTimeout

于 2012-06-30T08:24:41.520 に答える