Установить задержку при вызове ajax

Question

Я пытаюсь добавить небольшую задержку (2 секунды) между значком загрузчика и успехом с данными как html.

То, что я пытался использовать, это setTimeout и ввести номер задержки. Это не работает, поэтому я надеялся, что вы сможете показать мне, какой правильный путь.

Мой код Аякса:

<script type="text/javascript"> 

$(function() { 

    var delay = 2000; 

    var res = { 
     loader: $("<div />", { class: "loader" }) 
    }; 

    $('#search').on('click', function() { 
     $.ajax({ 
      type: 'GET', 
      url: "@Url.Action("Find", "Hotel")", 
      datatype: "html", 
      beforeSend: function() { 
       $("#group-panel-ajax").append(res.loader); 
       setTimeout(delay); 
      }, 

      success: function (data) { 
       $("#group-panel-ajax").find(res.loader).remove(); 
       $('#group-panel-ajax').html($(data).find("#group-panel-ajax")); 
      } 
     }); 
     return false; 
    }); 
}); 

</script> 

Сейчас он работает очень быстро. Надеюсь, кто-то может помочь.

Answer 1

setTimeout следует использовать внутри successfunction.

$(function() { 
 
    var delay = 2000; 
 
    var res = { 
 
    loader: $("<div />", { 
 
     class: "loader" 
 
    }) 
 
    }; 
 
    $('#search').on('click', function() { 
 
    $.ajax({ 
 
     type: 'GET', 
 
     url: "@Url.Action("Find", "Hotel")", 
 
     datatype: "html", 
 
     beforeSend: function() { 
 
     $("#group-panel-ajax").append(res.loader); 
 
     }, 
 
     success: function(data) { 
 
     setTimeout(function() { 
 
      delaySuccess(data); 
 
     }, delay); 
 
     } 
 
    }); 
 
    return false; 
 
    }); 
 
}); 
 

 
function delaySuccess(data) { 
 
    $("#group-panel-ajax").find(res.loader).remove(); 
 
    $('#group-panel-ajax').html($(data).find("#group-panel-ajax")); 
 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

вот что-то я нашел, когда я хотел сделать то же самое:

function doStuff() 
{ 
    //do some things 
    setTimeout(continueExecution, 10000) //wait ten seconds before continuing 
} 

function continueExecution() 
{ 
    //finish doing things after the pause 
} 

надеюсь, что это поможет Я.

Answer 3

Используйте setTimeout() так:

<script type="text/javascript"> 

$(function() { 

    var delay = 2000; 

    var res = { 
     loader: $("<div />", { class: "loader" }) 
    }; 

    $('#search').on('click', function() { 
     $.ajax({ 
      type: 'GET', 
      url: "@Url.Action("Find", "Hotel")", 
      datatype: "html", 
      beforeSend: function() { 
       $("#group-panel-ajax").append(res.loader); 

      }, 

      success: function (data) { 
       setTimeout(function(){ 
        $("#group-panel-ajax").find(res.loader).remove(); 
        $('#group-panel-ajax').html($(data).find("#group-panel-ajax")); 
       }, delay); 

      } 
     }); 
     return false; 
    }); 
}); 

</script> 

Answer 4

$(function() { 
 
    var delay = 2000; 
 
    var res = { 
 
    loader: $("<div />", { 
 
     class: "loader" 
 
    }) 
 
    }; 
 
    $('#search').on('click', function() { 
 
    $.ajax({ 
 
     type: 'GET', 
 
     url: "@Url.Action("Find", "Hotel")", 
 
     datatype: "html", 
 
     beforeSend: function() { 
 
     $("#group-panel-ajax").append(res.loader); 
 
     }, 
 
     success: function(data) { 
 
     setTimeout(function() { 
 
      delaySuccess(data); 
 
     }, delay); 
 
     } 
 
    }); 
 
    return false; 
 
    }); 
 
}); 
 

 
function delaySuccess(data) { 
 
    $("#group-panel-ajax").find(res.loader).remove(); 
 
    $('#group-panel-ajax').html($(data).find("#group-panel-ajax")); 
 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>