Question

I am using this simple function but it much skows down the web site depending on the time the webpage has been opened.when user refresh or goes to another page,it takes much time to refresh.

I am basically fecthing the user new posts.so time must keep running.

If i dont use this function then webpage loads quickly.Although this is a simple function
Plz help or suggest any alternarive approach.

$(document).ready(function() {
   setInterval( "timer();", 1000 );
});

function timer(){
    $.post('sendchat2.php', {option:'timer',id= $('#timer').val()}, function(data) {
        $('#timer').html(data);

    })
}

Answer 1

This is how I’d do it:

$(function () {

    var $timer = $ ( '#timer' );

    (function timeout () {
        $.post( 'sendchat2.php', { option: 'timer', id = $timer.val() }, function ( data ) {
            $timer.html( data );
            setTimeout( timeout, 1000 );  
        });            
    }());

});

So, you initiate the Ajax-request, wait for the response, inject it into the DOM, and only then initiate a one second timeout which repeats the whole process.

---

The general pattern:

(function f () {

    async(function () {

        // do work here

        setTimeout( f, delay );

    });

}());

So, the function f executes some asynchronous operation (e.g. Ajax request). The callback function of that operation performs some work (e.g. put Ajax response into DOM), and at the end it sets up a timer which invokes the f function after a given delay.