How to check json response taken longer than 5 seconds?

Question

Below is the sample code of my function. in the for loop one by one product id is pass in the ajax function and get product price from the php file as response and write it and html.

for(var i=0; i < data.products.length; i++){
 var doc = data.products[i];
 $.ajax({ // ajax call starts 
          url: 'product.php',
          data: { product_id: doc.id },
          dataType: 'json',
          success: function(data)
          {
           document.getElementById('price_price'+data.product_id+'').innerHTML = data.products_price;
          }
 });
 }

I have found that sometimes it takes a more time for price to display. i want to check which record is taking time to load. how can check to detect when it takes longer than 5 seconds for the price to load?

A better solution is to change your AJAX call to return the data for all elements in one call, and then loop through it in the `success` handler. — Rory McCrossan, Nov 29 '13 at 08:51
Did you know that most browsers only allow **6 concurrent AJAX requests**? Browser will block upfollowing requests in a queue: http://stackoverflow.com/questions/561046/how-many-concurrent-ajax-xmlhttprequest-requests-are-allowed-in-popular-browse It's better to debug these times and queue with something like **FireBug** — Daniel W., Nov 29 '13 at 08:55
@Rory Mccrossan how can return data for all elements in one call could you pls send me some sample code? — Jimmy, Nov 29 '13 at 09:00
Push an array: `json_encode($products => array($productId[0] => $price[0], $productId[1] => $price[1]));` in PHP then with JavaScript (why not use jQuery instead of getElementById?): `$.each(data.products, function(k, v) { $('#price_price-' + k).text(v); });` — Daniel W., Nov 29 '13 at 09:03
@DanFromGermany but the product id is passed one by one so how can i get all data in one element? — Jimmy, Nov 29 '13 at 09:15

score 5 · Answer 1 · answered Nov 29 '13 at 08:50

5

Something like this....

var ajaxTime= new Date().getTime();
$.ajax({
    type: "POST",
    url: "some.php",
}).done(function () {
    var totalTime = new Date().getTime()-ajaxTime;
    // Here I want to get the how long it took to load some.php and use it further
});

Also, by the way, if you want to prevent sending (i+1) request, before (i) is completed, you'd maybe want to use syncronous ajax request instead of async.

answered Nov 29 '13 at 08:50

Bogdan Burym

5,482
2
27
46

Thanks @Bogdan Burim for your reply. how can i use syncronous ajax request ? could you give me some example for it? – Jimmy Nov 29 '13 at 09:02

score 1 · Answer 2 · answered Nov 29 '13 at 08:51

Try to log timestamp beforesend and success or error

$.ajax({ // ajax call starts 
          url: 'product.php',
          data: { product_id: doc.id },
          dataType: 'json',
          beforeSend: function() {
              console.log(new Date().getSeconds());
          }
          success: function(data)
          {
              console.log(new Date().getSeconds());
              document.getElementById('price_price'+data.product_id+'').innerHTML = data.products_price;
          }
 });

score 1 · Answer 3 · answered Nov 29 '13 at 08:52

Use setTimeout, like this:

var timeoutTimer = setTimeout(function() {

    //  time out!!!.

}, 5000);

$.ajax({ // ajax call starts 
    url : 'product.php',
    data : {
        product_id : doc.id
    },
    dataType : 'json',
    success : function(data) {

        document.getElementById('price_price' + data.product_id + '').innerHTML = data.products_price;
    },
    complete : function() {

        //it's back
        clearTimeout(timeoutTimer);
    }
});

How to check json response taken longer than 5 seconds?

3 Answers3