0

我正在尝试学习 jQuery。我只是尝试使用基本的显示和隐藏创建一个带有下一个和上一个按钮的简单图片查看器。因此脚本的明显流程是首先隐藏上一个图像，然后显示下一个图像。但是有时当我快速单击下一个按钮时，它会显示下一个图像而没有完成上一个的 .hide() 。我需要一个优雅的方法来检查 .hide() 执行是否完成并等待它完成。这是代码片段

var picArray = new Array('#test1','#test2','#test3','#test4');
var picArrayIndex = 0;
$(document).ready(function()
{

$(picArray[picArrayIndex]).show();
$(".next-btn").click(function(){

    picArrayIndex++;
    if(picArrayIndex > picArray.length - 1)
        {picArrayIndex = 0;
            $(picArray[picArray.length - 1]).hide();
        }

    $(picArray[picArrayIndex - 1]).hide();
      $(picArray[picArrayIndex]).animate({
opacity: 1,
hspace:80    

 }, 1000, function() {
   // Animation complete.
 });
        $(picArray[picArrayIndex]).effect("bounce", { direction:'left', times:1 },   500);

    $(picArray[picArrayIndex]).show();
});
    $(".prev-btn").click(function(){

    picArrayIndex--;
    if(picArrayIndex < 0)
        {picArrayIndex = picArray.length - 1;
            $(picArray[0]).hide();}
    $(picArray[picArrayIndex + 1]).hide();
    $(picArray[picArrayIndex]).show();
});
});
4

2 回答 2

2

您可以检查隐藏回调：-

$(ele).hide("duration in milliseconds",function(){
   //your code after hiding is done.
});
于 2013-06-06T17:59:01.217 回答
0

对于复杂的解决方案，我需要使用 promise 来确保完成隐藏，您可以使用以下实现：

$(obj).hide().promise().done(function (){ /* Your code goes here */ });
于 2017-11-13T18:30:05.043 回答