javascript计数器不添加1，但添加2而不打算

我试图创建每次增加一个的计数器，如下所示：

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。。。不是1234。。。我做错什么了吗？它是什么？如何修复它？

我猜您有多个元素使用

class=“slider”

。对于淡出的每个元素，

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

）。我建议改为使用单个对象数组：

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"}
];

然后

---

我猜您有多个元素具有

class=“slider”

。对于淡出的每个元素，

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

）。我建议改为使用单个对象数组：

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"}
];

然后

---

将为每个匹配的元素调用回调。根据您的输出，看起来您有两个类为

.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);

})();

---

将为每个匹配的元素调用回调。根据您的输出，看起来您有两个类为

.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);

})();

---

在哪里还使用了

imnum

？您尚未披露如何声明此（错误）全局变量，或可能导致此情况的其他副作用。您有多少个

.slider

元素？每个元素调用一次回调。如果您有多个问题，您将多次调用

setTimeout

以响应第一次更改。请使用演示问题的命令更新您的问题，最好是使用堆栈片段（

[]

工具栏按钮；）运行的问题。@RandyCasburn它在函数changeImage（）之前声明我把它包括在我的question@T.J.Crowder我还有2个

imnum

在哪里使用？您尚未披露如何声明此（错误）全局变量，或可能导致此情况的其他副作用。您有多少个

.slider

元素？每个元素调用一次回调。如果您有多个问题，您将多次调用

setTimeout

以响应第一次更改。请使用演示问题的命令更新您的问题，最好是使用堆栈片段（

[]

工具栏按钮；）运行的问题。@RandyCasburn它在函数changeImage（）之前声明我把它包括在我的question@T.J.Crowder我有两个