1

我想要两个函数（一个向下的动画和一个向上的动画）在一个循环中一个接一个地执行，两个动画之间有几秒钟的超时。但是不知道用JS怎么说……</p>

这是我到目前为止所拥有的：

功能一

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

功能二

// 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

您可以使用setTimeoutor来执行此操作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毫秒下一个函数的函数，并在调用最后一个函数时从开头重复。这将导致您的peekTile, 等待, unpeekTile, 等待,peekTile等。

如果您更喜欢随意启动/停止，也许更通用的解决方案更适合您：

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()调用unpeekTile()一次，然后在函数结束时调用 1000 毫秒后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.peekTilesetTimeout

于 2012-06-30T08:24:41.520 回答