Question

我有一组在JavaScript中使用setTimeout（）函数在不同时间显示的对象。我所做的就是循环运行，为每个元素我为自己初始化一个setTimeout事件。

我用于每个元素的setTimeout的代码：

for (i = currentIndex; i < this.items.length; i++) {
    var object = "element#"+i;
    var delay = 10*i;
    this.keepDelay[id] = new Timer(function() {
                                $("#objectSet").css("display", "none").html(object).fadeIn("fast");
                                currentIndex = id;
                            }, delay);
}

Timer类是

function Timer(callback, delay) {
    var timerId, start, remaining = delay;

    // works
    this.pause = function() {
        window.clearTimeout(timerId);
        remaining -= new Date() - start;
    };

    // works    
    this.resume = function() {
        start = new Date();
        id = currentIndex;
        timerId = window.setTimeout(callback, remaining);
    };

    // does NOT work
    this.speedup = function() {
        remaining -= 100;
        window.clearTimeout(timerId);
        timerId = window.setTimeout(callback, remaining);
    }

    // does NOT work
    this.slowdown = function() {
        remaining += 100;
        window.clearTimeout(timerId);
        timerId = window.setTimeout(callback, remaining);
    }

    this.resume();
}

resume()和pause()方法可行。 resume()尝试根据延迟值一个接一个地显示每个对象。 pause()不言自明。这两个工作正常。

现在我想加快并减慢对象的延迟，我尝试编写speedup（）和slowdown（）方法但不知何故它们不会工作。

查看代码，我无法找到原因，也许我已经将注意力集中在太长的时间，所以我需要从一个新的头脑中寻求帮助。

Answer 1

您需要计算已经过的时间，以便计算出为其设置新计时器的时间。以下是.speedup()的示例：

this.speedup = function() {
    window.clearTimeout(timerId);
    var elapsed = new Date() - start;
    remaining-= elapsed + 100;
    if (remaining > 0) {
        this.resume();
    } else {
        callback();
    }
}

你会为.slowdown()做类似的事情。

我觉得这可以做得更简单一些：

this.speedup = function() {
    this.pause();
    remaining-= 100;
    this.resume();
}

this.slowdown = function() {
    this.pause();
    remaining+= 100;
    this.resume();
}

然后，您将this.resume()更改为此，以确保remaining不会消极：

this.resume = function() {
    start = new Date();
    id = currentIndex;
    if (remaining > 0) {
        timerId = window.setTimeout(callback, remaining);
    } else {
        callback();
    }
};

JavaScript - 延迟一组setTimeout活动

1 个答案: