为什么我的 setInterval 函数不起作用？ - 初学者

Question

我在 Javascript 方面有点初学者，我使用本网站上的示例拼凑了一些我能够理解但无法理解的简单代码开始工作。如果有人能指出我哪里出错了，我将不胜感激，and/or 解释为什么它需要在必要时进行彻底检修。

我的目标是让 "carousel" 中的 3 张图片在 4 秒后淡入淡出 in/fade。我以前能够实现这一点，但无法使其循环。

$(document).ready(function () {

    setInterval(function () {
        num = (num + 1) % 3;
    }, 4000);

    if(num > 3) {
        num = 1;
    }

    if(num = 1) {
        $(".carousel #slide-1").fadeIn();
        $(".carousel #slide-2").fadeOut();
        $(".carousel #slide-3").fadeOut();
    }
    if(num = 2) {
        $(".carousel #slide-1").fadeOut();
        $(".carousel #slide-2").fadeIn();
        $(".carousel #slide-3").fadeOut();
    }
    if(num = 3) {
        $(".carousel #slide-1").fadeOut();
        $(".carousel #slide-2").fadeOut();
        $(".carousel #slide-3").fadeIn();
    }
});

Answer 1

您的重复函数目前只是循环遍历数值，因为调整 DOM 元素的代码在之外。

您应该将所有代码移动到重复函数中，例如：

$(document).ready(function () {
    var num = 0;
    setInterval(function () {
        num = (num + 1) % 3;
        if(num == 0) {
            $(".carousel #slide-1").fadeIn();
            $(".carousel #slide-2").fadeOut();
            $(".carousel #slide-3").fadeOut();
            return;
        }
        if(num == 1) {
            $(".carousel #slide-1").fadeOut();
            $(".carousel #slide-2").fadeIn();
            $(".carousel #slide-3").fadeOut();
            return;
        }
        if(num == 2) {
            $(".carousel #slide-1").fadeOut();
            $(".carousel #slide-2").fadeOut();
            $(".carousel #slide-3").fadeIn();
        }
    }, 4000);
});

您会注意到我也做了一些其他更改，希望我已经掌握了所有更改，但可能还有其他更改：

初始化 num 变量。
不使用 = 进行相等性检查，而是使用 == 或 ===.
语句 num = (num + 1) % 3; 已经在 {0, 1, 2} 中循环，因此不需要进行其他检查。
if 语句已修改为使用 {0,1,2} 而不是 {1,2,3}。
return 已添加到前两个 if 块中，因为一旦您选择了其中一个块就无需继续。

Answer 2

$(document).ready() 触发一次。它执行您的闭包中的操作，然后退出并且永远不会回来。而您的 setInterval() 只是循环 num 值，其余代码不再执行。

检查下面的代码。我现在不质疑这个想法，只是改变它的工作方式：

$(document).ready(function () {
    var num = 0;
    var action = function() {
        if(num == 0) { // note the comparison: it's ==, not =
            $(".carousel #slide-1").fadeIn();
            $(".carousel #slide-2").fadeOut();
            $(".carousel #slide-3").fadeOut();
        } else if(num == 1) {
            $(".carousel #slide-1").fadeOut();
            $(".carousel #slide-2").fadeIn();
            $(".carousel #slide-3").fadeOut();
        } else if(num == 2) {
            $(".carousel #slide-1").fadeOut();
            $(".carousel #slide-2").fadeOut();
            $(".carousel #slide-3").fadeIn();
        }       
        num = (num + 1) % 3;
    };

    setInterval(action, 4000);
    action();
});

Answer 3

不要重复自己：

$(document).ready(function () {
    var num = 0;
    var action = function() {
        $(".carousel #slide-" + (num % 3) + 1).fadeIn();
        $(".carousel #slide-" + ((num + 1) % 3) + 1).fadeOut();
        $(".carousel #slide-" + ((num + 2) % 3) + 1).fadeOut();
        num = (num + 1);
    };
    setInterval(action, 4000);
    action();
});

或者，更好的是：

$(document).ready(function () {
    var slides = [
        $(".carousel #slide-1"),
        $(".carousel #slide-2"),
        $(".carousel #slide-3")
    ];
    var action = function() {
        slides[0].fadeIn();
        slides[1].fadeOut();
        slides[2].fadeOut();
        slides.push(slides.shift());
    };
    setInterval(action, 4000);
    action();
});

我最后的想法：

$(document).ready(function () {
    var slides = [].slice.call(document.querySelectorAll('.carousel [id^="slide-"]'));
    var action = function() {
        slides[0].fadeOut();
        slides[1].fadeIn();
        slides.push(slides.shift());
    };
    setInterval(action, 4000);
    slides.reduce(function(ignore, slide) { // fade out all slides after the first
        slide.fadeOut();
    });
    slide[0].fadeIn(); // fade in the first
});

Answer 4

不要硬编码。让它充满活力。此代码将适应 .carousel.

下任意数量的子图像

jQuery(function($) {
  var imgs = $('.carousel > img'),
      cur = 0;
  
  imgs.slice(1).hide();
  
  setInterval(function() {
    var hidden = cur;
    
    if (++cur >= imgs.length)
      cur = 0;
    
    if (hidden !== cur) {
      imgs.eq(hidden).fadeOut();
      imgs.eq(cur).fadeIn();
    }
  }, 4000);
});

.carousel {
  position: relative;
}

.carousel > img {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
  <img src="//placehold.it/200x100&text=1">
  <img src="//placehold.it/200x100&text=2">
  <img src="//placehold.it/200x100&text=3">
</div>

编辑：更新为仅触摸淡入和淡出的元素。

编辑：修复了只有一张图片时发生的淡入淡出错误。

为什么我的 setInterval 函数不起作用？ - 初学者

Why is my setInterval function not working? - Beginner

javascript

optimization

jquery

loops

setinterval