CODEWITHSUNDEEP
jqueryjsonajax
Hard Spocker
Hard Spocker

Reputation: 765

How do I measure a loading time of an AJAX request and display a loading panel?

I have here an AJAX request which can sometimes deal a very large json object. I want to display a loading panel which looks like this (in 45%):

enter image description here

My problem is that I can't seem to measure how long the server is gonna process the json object sent from the AJAX.

Here is my AJAX request:

$.ajax({
    url: './home/sumbit_json',
    type: 'POST',
    data: { 
      json_data: json_data, 
      user: user,
      entry: entry
    },
    dataType: 'json',
    success: function(data) {
      if (data.status == false) {
        alert("transaction failed");
      } else {
        alert("transaction successful");
      }

    }, // End of success function of ajax form
    error: function(xhr, status, errorThrown) {
      console.log("Error: " + errorThrown);
      console.log("Status: " + status);
      console.dir(xhr);
    },
});

Upvotes: 4

Views: 2945

Answers (2)

Konrad Tallman
Konrad Tallman

Reputation: 103

$.ajax({
    url: './home/sumbit_json',
    type: 'POST',
                // this will run before the request to server
    beforeSend: function(){
        // this variable may need to be set outside of ajax request
        // just use something to track time
        time = new Date();
    },
    data: { 
        json_data: json_data, 
        user: user,
        entry: entry
    },
    dataType: 'json',
    success: function(data) {
    if (data.status == false) {
        alert("transaction failed");
    } else {
        alert("transaction successful");
        //figure out how long it took:)
        alert(new Date() - time);
    }

    }, // End of success function of ajax form
    error: function(xhr, status, errorThrown) {
        console.log("Error: " + errorThrown);
        console.log("Status: " + status);
       console.dir(xhr);
    },
});

Maybe then you could start sending the data on how long it take to the server into a database. Start tracking the average of the process and then set the progress bar to finish at whatever the stored average value is in the database on the server before you begin the request. Of course if it finishes, just speed up the progress bar to the end.

You could extend this prediction by testing it many times with different throttling settings as found in Chrome. Then create average values in for the speed ranges on the database.

So the workflow: 1. time the length of a request at internet speed X. 2. put that time in the database 3. do another request with timing 4. calculate average with the value in the database and update database value 5. repeat 1-4 several time on different internet speed/latencies 6. now that you have a good idea of average execution times, send a request to get the average time in the database for the users current speed/latency to your server 7. set progress bar to complete within the average time found in step 6. 8. when request is done, update the average in the database to this real scenario.

Should just get more and more accurate over time.

Good luck!

Upvotes: 3

Greg Pettit
Greg Pettit

Reputation: 10830

The technology you are looking for is called a time machine. It does not exist. ;)

In the meantime, what you can do is this:

  1. Profile a typical use case using Developer tools. Do this several times and collect the data. Average it out or use the longest non-outlier to get the best ballpark you can.

  2. Set the progress to animate to... say... 90% over your "ballpark" time.

  3. When the request finally finishes, animate it up to 100% as part of your success callback.

Upvotes: 3

Related Questions