1

次の関数で定義されたループ アニメーション (アップ/ダウン) がいくつかあります。

ループ間隔

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

機能1（上向き）

function unpeekTile() {

    var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]);
    tile1.style.top = "0px";
    tile2.style.top = "0px";

    peekAnimation.execute();
}

機能 2 (下向き)

function peekTile() {

    var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]);
    tile1.style.top = "-120px";
    tile2.style.top = "-120px";

    peekAnimation.execute();

}

始める

        function c() { Cycler(peekTile, unpeekTile).start(); }
        setTimeout(c, 0);

        function c2() { Cycler(peekTile2, unpeekTile2).start(); }
        setTimeout(c2, 500);

        function c3() { Cycler(peekTile3, unpeekTile3).start(); }
        setTimeout(c3, 2000);

アニメーションは 1000 (間隔時間) + 0/500/2000 (setTimeout) で開始されるようになりましたが、0、500、および 2000 ミリ秒で開始したいと考えています。誰でも助けることができますか？

4

2 に答える 2

0

私が正しく理解していれば、インターバルコールバックをインターバルにバインドするだけでなく、タイムアウト終了と設定されているインターバルの間に1回実行することも事実上言っています。

これは、次の変更を意味しCycler.prototype.startます。

Cycler.prototype.start = function (interval) {
    var that = this, int_callback;  //<-- added var
    interval = interval || 1000;
    this.intervalId = setInterval(int_callback = function () {
        that.fns[that.pos++]();
        that.pos %= that.fns.length;
    }, interval);
    int_callback(); //<-- added line - call the func immediately, once
}
于 2012-07-07T23:04:36.213 に答える
0

1つの解決策は次のとおりです。

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

これにより、関数が一度定義されたままになり、単にフィードしsetIntervalて直接呼び出すだけです。

于 2012-07-07T23:09:20.343 に答える