Javascript 带超时的循环函数

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

以下是我迄今为止的情况：

职能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 …
    }
});

使用

setInterval（）

每1000毫秒调用

unpeekTile（）

，然后在

unpeekTile（）函数结束时的1000毫秒后调用
setTimeOut（）
运行
peekTile（）
：

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

您可以使用
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
msec循环调用列表中的下一个函数，并在调用最后一个函数时在开始处重复。这将导致您的
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();

查看

​
我不能用
这个
来代替animation.peekTile，因为
setTimeout
在全局范围内执行
如何在代码中实现peekTile和unpeekTile之间的1秒延迟？；）您的defn是正常的，但在代码中不同：）@Tamil unpeekTile每1000毫秒运行一次，然后它的最后一条指令是
setTimeOut（peekTile，1000）等待1000毫秒，然后运行
peekTile（）
函数。现在您的编辑看起来很好。起初这是不正确的。这是setTimeout而不是setTimeout你可以玩玩
setTimeout
已经发布了一个工作提琴为你的信息我投票了你的答案。第一个解决方案使用
setTimeOut
代替
setTimeOut
并且它不起作用。你不能就这样责怪别人。我在评论中明确提到了这一点。此外，您不能仅通过向下投票来影响您的编程方式。是否可能使用setTimeout方法在3秒后才启动函数？@just2n回答得很好，就像cycler@DownVoter你能解释一下原因吗？
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);