多次触发动画

Question

好的，所以我试图制作一个简单的滑块，但是发生的是我的可变当前图像被增加了3倍（即：由于某种原因多次触发了动画回调）

var currentImage = 0;

$("#1").show();

setInterval(slider,5000);

function slider()
{
    $(".slider img").animate({
        opacity: 0
    }, 500, function() {
        $("#"+currentImage).hide();
        if(currentImage <= 3)
        {
            currentImage++;
        }
        else
        {
            currentImage = 1;
        }
        $("#"+currentImage).show();
        console.log(currentImage); //print 1, 2, 3 each time it gets called
        showSlider();
    });
}
function showSlider()
{
    $(".slider img").animate({"opacity":1}, 500);
}

回调本身的行为就像在循环中一样

我已经附上了控制台日志的屏幕截图，该屏幕截图每次都会打印

Answer 1

好的，问题是我有3个图像标签正在交换。每个元素被调用时，动画本身被触发了3次。

我如何解决它只是转换为Promise

$(".slider img").animate({
            opacity: 0
        }, 500).promise().then(function() {
            $("#"+currentImage).hide();
            if(currentImage < 3)
            {
                currentImage++;
            }
            else
            {
                currentImage = 1;
            }
            $("#"+currentImage).show();
            console.log(currentImage);
            showSlider();
        });