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

Question

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%):

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);
    },
});

is it an option to send the large file in chunks? so you can process it and update the percentage every time you finish with one chunk? — Cacho Santa, Oct 02 '15 at 01:26
Related: http://stackoverflow.com/questions/2474528/showing-progressbar-progress-with-ajax-request — Thilo, Oct 02 '15 at 01:29
@cacho yes but i think it will make the processing time slower as i need to split the large data into partition. if thats what you mean — Hard Spocker, Oct 02 '15 at 01:32

score 3 · Answer 1 · answered Oct 02 '15 at 01:26

3

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

In the meantime, what you can do is this:

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.
Set the progress to animate to... say... 90% over your "ballpark" time.
When the request finally finishes, animate it up to 100% as part of your success callback.

answered Oct 02 '15 at 01:26

Greg Pettit

10,749
5
53
72

i found this a good solution but not the best as it does not show a precise loading time. can my problem be somehow related to the loading time in windows when transferring file? how did they manage to do that? – Hard Spocker Oct 02 '15 at 01:42
1

What you're missing is that it's impossible for it to be precise. I'm not sure if you're recognizing that you're asking for a process to predict the future. The best you can hope for is a reasonable estimate. File transfer is different but also not perfect. You establish an average rate, you know the size of the file, so you can reasonably predict when it will arrive. But it is not perfectly precise, either; it is constantly recalculating as it transfers, owing to changing conditions. – Greg Pettit Oct 02 '15 at 01:56

Konrad Tallman · Accepted Answer · 2015-10-02T01:41:36.873

3

$.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!

edited Oct 02 '15 at 01:41

answered Oct 02 '15 at 01:32

Konrad Tallman

103
5

yeah the problem is that the json data can be very dynamic. it sometimes contain a very large data, sometimes very small. – Hard Spocker Oct 02 '15 at 01:37
where can i find the throttling settings you mentioned in Chrome? – Hard Spocker Oct 02 '15 at 01:39
f12. near the top of that popup on the left there will be a cellphone icon. click that and then near your bookmarks there will be a 'network' field with a dropdown of multiple selections. – Konrad Tallman Oct 02 '15 at 01:43
The dynamicacy (new word) of the json object does not matter. You are using averages. So whatever the most common time is will be what you use to set the progress bar's behavior. Of course if you know certain things that will increase that object or decrease it, put that into a separate value. – Konrad Tallman Oct 02 '15 at 01:45
Perhaps you know that you have to get a user object at 150kbps@200ms ping. Find the average that makes since for that scenario. Averages here are key. Averages are the only thing you can use for dynamic things. You can break down 1000s of scenarios and create averages for those. It all depends on how accurate you want to be. – Konrad Tallman Oct 02 '15 at 01:47
Least amount of work would be to only store the average time for EVERY request regardless of internet speed/latency or the size of the json object. After 1000s of this task being executed and averaged out, I think you'll have a 'good enough' progress bar behavior. – Konrad Tallman Oct 02 '15 at 01:50
i got your point, but let say for example. the average loading time is 20s, then another large data appeared and was processed for 40s, will the loading panel reach 100% when its in 20s? then waits for another 20s to actually finish? @Konrad – Hard Spocker Oct 02 '15 at 01:51
1

Only go to 98%. It's up to you to figure out the logic to figure out the scenarios that are common enough to track the average. This is prediction and averages at what you need. – Konrad Tallman Oct 02 '15 at 01:58
It's just that based on the information given its hard to solve the problem accurately with essentially saying " average all the requests out and hope that that average is very common." – Konrad Tallman Oct 02 '15 at 02:12
And you can take comfort in the fact that most people that use progress bars are used to inaccurate progress bars as we see in Windows installers. – Konrad Tallman Oct 02 '15 at 02:12

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

2 Answers2

Linked