setInterval的问题

Question

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

JSFiddle of the Project

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