维护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()应在if块执行完毕后生效，但现在它直接隐藏了元素。

Answer 1

实际上，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();
        });
    });
});

Answer 2

$(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);
  } 
}