Javascript 设置被多次触发的动画

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

var currentImage=0；
$（“#1”）.show（）；
设置间隔（滑块，5000）；
函数滑块（）
{
$（“.slider img”）.animate({
不透明度：0
}，500，函数（）{
$（“#”+currentImage）.hide（）；
如果（currentImage好的，那么问题是我交换了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();
        });

$（“.slider img”）。设置动画({
不透明度：0
}，500）。promise（）。然后（function（））{
$（“#”+currentImage）.hide（）；
如果（当前图像<3）
{
currentImage++；
}
其他的
{
currentImage=1；
}
$（“#”+currentImage）.show（）；
console.log（currentImage）；
showSlider（）；
});
不要只是发布一个屏幕截图和代码片段，提供一个。在看了你的最后两个问题和答案后，你似乎误解了这是为什么。这是一个QA网站，在这里，问题和答案都应该对未来的用户有帮助，要做到这一点，需要在问题中重现一个问题，而你失败了重复这样做。请重新阅读。
$(".slider img").animate({
            opacity: 0
        }, 500).promise().then(function() {
            $("#"+currentImage).hide();
            if(currentImage < 3)
            {
                currentImage++;
            }
            else
            {
                currentImage = 1;
            }
            $("#"+currentImage).show();
            console.log(currentImage);
            showSlider();
        });