Question

我正在尝试创建每次增加一的计数器，如下所示：

var imnum=0;
(function changeImage(){
    ++imnum;
   $( ".slider" ).fadeOut( 5000, function() {
    // Animation complete.
    $('#home-slider-im').attr("src",images[imnum]);
    $('#home-slider-t').attr("src", imagesText[imnum]);

    $( ".slider" ).fadeIn( 2000, function() {
      // Animation complete
    });

    console.log(imnum);
    setTimeout(changeImage,10000)

})})();

但是控制台日志输出是1 3 7 15 ...不是1 2 3 4 ...我在做错什么吗？它是什么？该如何解决？

Answer 1

我猜您在class="slider"中有多个元素。 {strong>每个元素会逐渐消失，fadeOut回调函数会被调用。因此，如果有两个（例如），则对changeImage的第一次调用将触发两次回调……然后事情将从那里迅速加速。：-）

由于您的淡出为5000ms，淡入为2000ms，并且图像之间的延迟为10000ms，因此只需将setTimeout移到fadeOut回调之外：

var imnum = 0;
(function changeImage() {
    ++imnum;
    $(".slider").fadeOut(5000, function() {

        // Animation complete.
        $('#home-slider-im').attr("src", images[imnum]);
        $('#home-slider-t').attr("src", imagesText[imnum]);


        // $(this).stop();
        $(".slider").fadeIn(2000, function() {
            // Animation complete
        });
        //alert(i);
        // console.log(i);
    });

    // *** Outside the callback
    console.log(imnum);
    setTimeout(changeImage, 10000)
})();

（我也进行了更新，使其具有一致的花括号符号和缩进，这大大提高了可读性。）

旁注：您似乎正在从数组中获取图像信息，但始终增加imnum变量，而不检查它是否环绕。这个技巧可能有用：

imnum = (imnum + 1) % images.length;

当到达数组末尾时，它将换回0。

旁注2：您似乎具有并行数组（images和imagesText）。我建议改用 singel 对象数组：

var images = [
    {text: "text for the image 1", src: "http://example.com/img/1"},
    {text: "text for the image 2", src: "http://example.com/img/2"},
    {text: "text for the image 3", src: "http://example.com/img/3"}
];

然后

$('#home-slider-im').attr("src", images[imnum].src);
$('#home-slider-t').attr("src", images[imnum].text);

Answer 2

每个匹配的元素都会调用您的回调。根据您的输出，看起来您有两个类为.slider的元素，因此每次调用该函数时，它都会两次调用setTimeout()。相反，您可以在回调之外设置超时时间，然后再等待一会儿：

var imnum=0;
(function changeImage(){
    ++imnum;
   $( ".slider" ).fadeOut( 5000, function() {

    // Animation complete.
    $('#home-slider-im').attr("src",images[imnum]);
    $('#home-slider-t').attr("src", imagesText[imnum]);


   // $(this).stop();
    $( ".slider" ).fadeIn( 2000, function() {
      // Animation complete
    });
    //alert(i);
   // console.log(i);

 });
 setTimeout(changeImage,15000)
 console.log(imnum);

})();

javascript计数器不加1，但不加2

2 个答案: