Question

I want to auto refresh “result” div with ajax & setInterval function.

But there is a one problem. I want auto-refresh in 500ms but sometimes ajax loading more than 500ms. In this cases consists problem. I want to if ajax loading time 750ms then interval time 750 (or any time longer 500ms) else 500. How can I do this ?

    var refreshId = setInterval(function()
{
    var number=$("#number").html();

    $.ajax({
    type: 'GET',
    url: 'ajax.php',
    data: 'num='+number,
    success: function(ajaxResult) {
      $('#result').html(ajaxResult);

    }
        });

    if(number<100){
        number++;
        $("#number").html(number);
        }

}, 500);

Answer 1

Use setTimeout instead of setInterval. Set timeout function inside ajax response function, and you won’t have problems with syncronizing server calls.

    (function pollStep(){
        var number=$("#number").html();   
        $.ajax({
           type: 'GET',
           url: 'ajax.php',
           data: 'num='+number,
           success: function(ajaxResult) {
               $('#result').html(ajaxResult);
               setTimeout(pollStep, 500);   
           }
        });
        if(number<100){
            number++;
            $("#number").html(number);
        }
     })();