Поддержание порядка выполнения jQuery

Question

В моем коде jQuery у меня возникли проблемы с соблюдением правильного порядка выполнения. Я осмотрелся и узнал, что использование опции setTimeout() - это вариант, но я не уверен, где его использовать. В настоящее время структура кода, как показано ниже с setTimeout():

$(document).ready(function(){ 
    $('#search-submit').on('click', function(){ 
    var keyword = $('#search-input').val(); 
    $(".loading").show(); 

    setTimeout(function() { 
     if(){ 
     //some conditions and calls to post 
     } 
     $(".loading").hide(); 
    }, 0); 
    } 
    } 

hide() должен вступить в силу после того, как если блок завершит выполнение, но теперь она непосредственно скрывает элемент.

Answer 1

$(document).ready(function(){ 
    $('#search-submit').on('click', function(){ 
    var keyword = $('#search-input').val(); 
    $(".loading").show(); 

    if(){ 
     //some conditions and calls to post 
    } 

    setTimeout(function() { 
     $(".loading").hide(); 
    }, 1500); 
    } 
} 

Answer 2

На самом деле, JQuery имеет более изысканный способ сделать вещи синхронным:

$(function() { 

    $('#search-submit').on('click', function(){ 

     var keyword = $('#search-input').val(); 

     $('.loading').show().queue(function() { 

      if (...) { 
      //some conditions and calls to post 
      } 

      $(this).dequeue(); 

     }).queue(function() { 

      $(this).hide().dequeue(); 
     }); 
    }); 
});