Issues with setInterval

Question

我正在使用jQuery和一些javascript创建一个简单的幻灯片，但是我在使用setInterval函数时遇到了问题。

JSFiddle项目

$(document).ready(function () {
slidePos = 1;
autoScrollInterval = setInterval(function () {
    slidePos = SlideRight(slidePos)
}, 7000);
$(".ss-indicator-arrow").css("width", $(".ss-slideshow").width() / $(".ss-slide").length);
$(".ss-right-arrow").click(function () {
    window.clearInterval(autoScrollInterval);
    slidePos = SlideRight(slidePos);
    setTimeout(function () {
        autoScrollInterval = setInterval(function () {
            slidePos = SlideRight(slidePos)
        }, 7000);
    }, 10000);
});
$(".ss-left-arrow").click(function () {
    window.clearInterval($.autoScrollInterval);
    slidePos = SlideLeft(slidePos);
    setTimeout(function () {
        autoScrollInterval = setInterval(function () {
            slidePos = SlideRight(slidePos)
        }, 7000);
    }, 10000);
})
});
$(window).resize(function () {
    $(".ss-indicator-arrow").css("width", $(".ss-slideshow").width() / $(".ss-slide").length);
    Reset();
});
function SlideRight(slidePos) {
    slidePos++;
    if (slidePos <= $(".ss-slide").length) {
        $(".ss-container").css("margin-left", -((slidePos - 1) * $(".ss-slideshow").width()) + "px");
        $(".ss-indicator-arrow").css("left", ($(".ss-indicator-arrow").width() * (slidePos - 1) + "px"));
    }
    else
        Reset();
    return slidePos
}
function SlideLeft(slidePos) {
    slidePos--;
    if (slidePos > 0) {
        $(".ss-container").css("margin-left", -((slidePos - 1) * $(".ss-slideshow").width()) + "px");
        $(".ss-indicator-arrow").css("left", ($(".ss-indicator-arrow").width() * (slidePos - 1) + "px"));
    }
    else {
        slidePos = $(".ss-slide").length;
        $(".ss-container").css("margin-left", -((slidePos - 1) * $(".ss-slideshow").width()) + "px");
        $(".ss-indicator-arrow").css("left", ($(".ss-indicator-arrow").width() * (slidePos - 1) + "px"));
    }
    return slidePos;
}
function Reset() {
    slidePos = 1;
    $(".ss-container").css("margin-left", "0px");
    $(".ss-indicator-arrow").css("left", "0px");
}

到目前为止，我已经尝试了许多不同的方法，并且在某种程度上破坏了我之前拥有的基本功能。但现在，主要的问题是，如果一个箭头被按了多次，在等待setTimeout周期后，它将通过相同数量的幻灯片前进(即如果按钮被按了3次，当setInterval开始时，它将再次移动3张幻灯片)

什么是最有效的方法，我可以有一个间隔暂停后，用户输入，然后再次恢复?

Answer 1

什么是最有效的方法，我可以有一个停顿的间隔用户输入后，再恢复吗?

看这个例子演示:http://jsfiddle.net/n8c3pycw/1/

var Timer = {
    totalSeconds: 300,
    start: function () {
        var self = this;
        this.interval = setInterval(function () {
            self.totalSeconds -= 1;
            if (self.totalSeconds == 0) {
                Timer.pause();
            }
            $("#timer").text(parseInt(self.totalSeconds, 10));
        }, 1000);
    },
    pause: function () {
        clearInterval(this.interval);
        delete this.interval;
    },
    resume: function () {
        if (!this.interval) this.start();
    }
}
Timer.start();
$("#start").click(function(){
    Timer.resume();
});
$("#stop").click(function(){
    Timer.pause();
});

Answer 2

尝试使用setTimeout或setInterval。

example: var autoScrollInterval = runInterval();
function tochangeyourimage (delta) {
  autoRunInterval = runInterval();
};
function runInterval() {
  return setInterval(tochangeyourimage, 7000, 1);