javascript - 构建 JS 自动幻灯片，但循环和/或 setInterval 实例同时运行？

Question

我正在尝试从头开始构建一个非常简单的自动幻灯片，但我遇到了一些困难。我以前制作过工作幻灯片，但不是自动化的。所以我开始构建一个并尝试使用 for 循环结构或 setInterval() 方法来模拟循环:

$(function carousel() {
    $('.slide:not(:first-child)').hide();
    var slide1 = $('.slide:first-child');
    var slide2 = $('.slide:nth-child(2)');
    var slide3 = $('.slide:nth-child(3)');
    var slide4 = $('.slide:last-child');

    function moveSlide(currentSlide, nextSlide) {
        setInterval(function () {
            currentSlide.hide("slide", {direction: "left"}, 1000);

            setTimeout(function () {
                nextSlide.show("slide", {direction: "right"}, 1000);
            }, 1000);
        }, 1500);
    }

    var arr = [moveSlide(slide1, slide2), moveSlide(slide2, slide3), moveSlide(slide3, slide4)];
    var i = 0;
    setInterval(function () {
        if (i < arr.length) {
            arr[i] += 1;
            console.log(i + "=>" + arr[i]);
        } else {
            return;
        }
        i++;
    }, 1500);
});

这是一个 Codepen .

不幸的是，这并不顺利，我知道为什么。我了解在 JS 中，如果使用 setInterval 或 setTimeout，代码将继续执行并且不会等待循环中的信息完成。所以我的问题是，不需要使用外部库或插件的好的解决方法是什么？如果您能尝试尽可能接近我的源代码，那就太棒了。谢谢!

Answer 1

您的代码存在一些问题。调用 moveSlide() 将隐藏指定的幻灯片并(在超时后)显示指定的下一张幻灯片，但是您在该函数中使用 setInterval() 意味着它将继续尝试隐藏同一张幻灯片，然后显示下一张。

带有 var arr = [moveSlide(slide1, slide2),... 的行是立即调用 moveSlide() 函数并且将其返回值放入数组中。因此，这意味着您有多个间隔都在运行(每次调用 moveSlide())，并且所有间隔都在相互跨越以试图隐藏和显示相同的元素。返回值也是 undefined，所以基本上你得到了一个充满 undefined 的数组。

我建议您改为执行以下操作:

    $(function carousel() {      
        // get a list of *all* slides:
        var slides = $('.slide');
        // hide all but the first:    
        slides.slice(1).hide(); 
        var current = 0;
    
        setInterval(function() {
          // hide the current slide:
          slides.eq(current).hide(1000);
          // increment the counter, wrapping around from end of the
          // list to the beginning as required:
          current = (current + 1) % slides.length;
          // show the next slide after a timeout:
          setTimeout(function () {
             // note that `current` was incremented already:
             slides.eq(current).show(1000);
          }, 1000);
        }, 3500); // make the interval larger than the hide/show cycle
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div class="slide">Slide 4</div>
<div class="slide">Slide 5</div>

请注意，我不需要为各个幻灯片设置单独的变量，我只有一个 slides 变量，它是一个包含所有 幻灯片的 jQuery 对象。这意味着您可以轻松更改页面上幻灯片的数量，而无需更改 JS。

请注意，我没有耐心让 jQueryUI 在代码片段中工作，所以我只使用了一个简单的 .hide() 和 .show()，但是显然，这不是我展示的代码的重要部分。