CODEWITHSUNDEEP
javascriptphpjquery
Jihane
Jihane

Reputation: 150

Calculating the Time of an ajax Response and use that time in SetTimeout function

I am trying to get the response time of an ajax request and use it in a setTimeout() function, this function displays a loader that is suppose to keep loading until we get the response.

Here's my function : 

 $("#recalculer").click(function(){
        ajax_call();
        setTimeout(function()
            {
                $("#divgris").fadeTo(0,1);
                $("#loadingdiv2").hide();
            }, 5000); 
    });

And here's my ajax request : 

 function ajax_call()
    {
        var resultat;
        var duree_souhaitee= $("#duree").val();
        var apport_personnel= $("#apport").val().replace(/\s+/g, '');
        var prix_achat_bien=$("#prix").val().replace(/\s+/g, '');
        $.ajax({ 
            type: "POST",
            url: "/iframe/rest-assurance",
            data : {
                "duree_souhaitee" : duree_souhaitee,
                "apport_personnel" : apport_personnel,
                "prix_achat_bien" : prix_achat_bien
            },
            dataType: 'json',
            xhrFields: {
            withCredentials: true
            },
            async: true,
            beforeSend: function(){
                $("#actualiserAssurance").hide();

            },
            success: callback_assurance
        });
    }

For now i set a time of 5000 but i need to replace it with the ajax response time, how can I achieve that ?

Upvotes: 0

Views: 134

Answers (3)

ArtisticPhoenix
ArtisticPhoenix

Reputation: 21671

I use always:

$("#loadingdiv2").show();
$.ajax(
 ...
).always(function(){ $("#loadingdiv2").hide(); });

If you want to separate it from the Ajax call I would use a custom event.

 $("#recalculer").click(function(){
    ajax_call();
 });

 $("body").bind('custom.ajaxStart', function(){ $("#loadingdiv2").show(); });

 $("body").bind('custom.ajaxStop', function(){ $("#loadingdiv2").hide(); });

  function ajax_call(){
    $('body').trigger('custom.ajaxStart');
    $.ajax(..).always(function(){ $('body').trigger('custom.ajaxStop'); });
  }

The always callback is triggered even on a 404, relying on timing never works well for me.

Using an event gives you the flexibility of calling the loading deal, from anywhere.

Upvotes: 1

Peter Bode
Peter Bode

Reputation: 222

Meaby the you can use:

console.time(label); and console.timeEnd(label);

more info can be found here. Goodluck!

Upvotes: 1

hossein sedighian
hossein sedighian

Reputation: 2045

use 

var afterfnc = ()=>{
   $("#divgris").fadeTo(0,1);
  $("#loadingdiv2").hide();
}

and then set

callback_assurance  = afterfnc

in ajax call

Upvotes: 0

Related Questions