Question

The function below will make an Ajax call to load data from a mySQL database:

    function displayAll() {                 
    clearInterval ( stopCompoundingInt ); //stop current Interval
        sendAjax('search', 'q', function(responseText){
        $("#txtResp").html(responseText);
            stopCompoundingInt = setInterval ( function(){  // start a new interval with below conditions:
                sendAjax('search', 'q', function(responseText){
                $("#txtResp").html(responseText);
                });
       }, 5000 );
     })
}

Here is one place where it is applied:

var eInput = "";
stopCompoundingInt = 0;
$('#searchbar').live('keyup',function() {
    eInput = $(this).val();
    if (eInput.length > 0) {

        clearInterval ( stopCompoundingInt );
        $('#display_all').hide();
        sendAjax('search', eInput, function(responseText){
             $("#txtResp").html(responseText);
              stopCompoundingInt = setInterval ( function(){
                     sendAjax('search', eInput, function(responseText){
                            $("#txtResp").html(responseText);
                     });
              }, 5000 );
       })
    } else {
        displayAll(); // run the above function to show all events
    }
});

The function is supposed to run on an interval of 5 seconds if there is no text in the textbox with ID= “searchbar”

Does anyone have any suggestions that will improve the performance of this function?

Many Thanks,

Taylor

Answer 1

You might want try jQuery .load() function and see jQuery Timers plugin. I believe reusing their solution is quite good and quite simple solution.