Question

我正在尝试学习jQuery。我只是尝试使用基本的show和hide创建一个带有下一个和上一个按钮的简单图片查看器。因此，脚本的明显流程是首先隐藏上一个图像，然后显示下一个图像。但有时当我快速单击下一个按钮时，它会显示下一个图像而不完成前一个的.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();
});
});

Answer 1

您可以检查隐藏回调： -

$(ele).hide("duration in milliseconds",function(){
   //your code after hiding is done.
});

Answer 2

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

$(obj).hide().promise().done(function (){ /* Your code goes here */ });

检查jquery hide是否已完成执行

2 个答案: