setInterval的问题 [英] Issues with setInterval

问题描述

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

I'm creating a simple slideshow using jQuery and some javascript, but I'm running into issues using the setInterval functions.

项目的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张幻灯片)

So far I've tried many different methods, and have somewhat ruined the basic functionality I had before. But for now, the primary issue is that if an arrow is pressed multiple times, after the wait setTimeout period, it will then progress through the same number of slides (ie if the button is pressed 3 times, when the setInterval starts over it will move 3 slides again)

让间隔在用户输入后暂停然后再次恢复的最有效方法是什么?

推荐答案

尝试使用setTimeout或setInterval.

Try using either setTimeout or setInterval.

example: var autoScrollInterval = runInterval();

function tochangeyourimage (delta) {
  autoRunInterval = runInterval();
};

function runInterval() {
  return setInterval(tochangeyourimage, 7000, 1);

这篇关于setInterval的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！