動畫被多次觸發

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 次，因為它被每個元素調用。

我如何修復它只是切換到承諾

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