间隔/setTimeout 起点答案

【问题标题】：Interval / setTimeout starting points间隔/setTimeout 起点
【发布时间】：2023-03-30 10:36:01
【问题描述】：

我有几个循环动画（向上/向下），由以下函数定义。

循环间隔

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 毫秒开始。有人可以帮忙吗？

【问题讨论】：

标签： javascript animation loops settimeout

【解决方案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
}

【讨论】：

我认为这会将int_callback 放入全局命名空间。可能想在那里扔一个var。
非常感谢 - 这对我有用！只是一点点改变： int_callback var 必须单独声明： var that = this; var int_callback;
这将与我当前的代码完全相同 - 它是一个本地函数。试试看 - 在Cycle.prototype.start之外无法访问。
@Betsy：实际上，int_callback 不必在单独的语句中声明。但是，是否应该这样做存在争议。你可以在SO here阅读一些意见

【解决方案2】：

一种解决方案是：

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 并直接调用它。

【讨论】：