Проверка выполнения jquery hide

Question

Я пытаюсь изучить jQuery.I просто попытался создать простой просмотрщик изображений со следующими и предыдущими кнопками, используя базовое шоу и скрыть. Смысл очевидного потока скрипта состоял в том, чтобы сначала скрыть предыдущее изображение и затем показать следующее изображение. Но иногда, когда я быстро нажимаю на следующую кнопку, он отображает следующее изображение без завершения .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

Для сложных решений мне нужно использовать обещание обеспечить, чтобы скрыть это сделано, вы могли бы использовать эту реализацию: