Question

我有一个简单的幻灯片，每隔5秒就会使用setInterval自动更改图像。

用户还可以使用上一个和下一个链接从一个图像移动到另一个图像。

如果用户单击prev / next链接，则计时器不会中断，例如，如果用户单击链接时计时器处于3秒，则下一图像仅显示2秒后再次更改。

我知道我可以通过使用clearInterval然后再次使用setInterval来实现这一点但是有更简洁的方法吗？

如果您需要，这是我的代码：

//Move to next image every 10 seconds unless paused.
var timeInterval = 5000;
var featureSlide = window.setInterval(function() { nextFeature("next")}, timeInterval);

$("a#feature-prev").click( function () {        
    nextFeature("prev");
    return false;
});

$("a#feature-next").click( function () {
    nextFeature("next");
    return false;
});



function nextFeature(action) {

    var idNow = $("ul#features li:visible").attr("id");
    var pos = idNow.replace("feature-", "");

    //If image is currently animated do nothing
    //If this isn't in place then multiple images are displayed
    if ($("li#" + idNow).is(":animated")) {
        return;
    } else {

        if (pos == 4 && action == "next") {
            pos = 1;
        } else if (pos != 4 && action == "next") {
            pos++;
        } else if (pos !=1 && action == "prev") {
            pos--;
        } else if (pos == 1 && action == "prev") {
            pos = 4
        }


        pos = "feature-" + pos;
        // Slide to next image
        $("li#" + idNow).hide("slide", { direction: "right" }, 1000, function () {
            $("li#" + pos).show("slide", { direction: "left"}, 1000);
        });


    }
}

谢谢！

Answer 1

如果不取消并重新启动计时器，则无法重新启动计时器。

或者，您可以完全停止使用setInterval，并使用setTimeout。每当您显示图片时，请安排下一个图片（如果我正确阅读您的代码，请在show nextFeature之后）。然后，间隔重置作为逻辑流程的副产品而不是特殊的东西发生。

在没有clearInterval的setInterval上重置计时器

1 个答案: