Speed Up Jquery heartbeats

Question

I'm a pretty new programmer who made an application that sends out a heartbeat every 3 seconds to a php page and returns a value, the value of which decides which form elements to display. I've been fairly pleased with the results, but I'd like to have my jquery as fast and efficient as possible (its a little slow at the moment). I was pretty sure SO would already have some helpful answers on speeding up heartbeats, but I searched and couldn't find any.

So here's my code (just the jquery, but I can post the php and html if needed, as well as anything anyone needs to help):

<script type="text/javascript">
$(document).ready(function() {  
  setInterval(function(){

    $('.jcontainer').each(function() {
        var $e = $(this);
        var dataid = $e.data("param").split('_')[1] ;
        $.ajax({
            url: 'heartbeat.php',
            method: 'POST',
            contentType: "application/json",
            cache: true,
            data: { "dataid": dataid },
            success: function(data){


                var msg = $.parseJSON(data);

                if (msg == ""){ //after reset or after new patient that is untouched is added, show checkin
                    $e.find('.checkIn').show();
                    $e.find('.locationSelect').hide();
                    $e.find('.finished').hide();
                    $e.find('.reset').hide();
                }
                if ((msg < 999) && (msg > 0)){ // after hitting "Check In", Checkin button is hidden, and locationSelect is shown
                    $e.find('.checkIn').hide();
                    $e.find('.locationSelect').show();
                    $e.find('.finished').hide();
                    $e.find('.reset').hide();
                    $e.find('.locationSelect').val(msg);
                }
                if (msg == 1000){ //after hitting "Checkout", Option to reset is shown and "Finished!"
                    $e.find('.checkIn').hide();
                    $e.find('.locationSelect').hide();
                    $e.find('.finished').show();
                    $e.find('.reset').show();
                }


            }
       });


    });
  },3000);


$('.checkIn').click(function() {
    var $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    // gets the id  of button  (1 for the first button)
    // You can map this to the corresponding button in database...
    $.ajax({
        type: "POST",
        url: "checkin.php",
        // Data used to set the values in Database
        data: { "checkIn" : $(this).val(), "buttonId" : data},
        success: function() {
            // Hide the current Button clicked
            $e.hide();
            var $container = $e.closest("div.jcontainer");
            // Get the immediate form for the button
            // find the select inside it and show...
            $container.find('.locationSelect').show();
            $container.find('.locationSelect').val(1);
        }
    });
});
$('.reset').click(function() {
    var $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    // gets the id  of button  (1 for the first button)
    // You can map this to the corresponding button in database...
    $.ajax({
        type: "POST",
        url: "reset.php",
        // Data used to set the values in Database
        data: { "reset" : $(this).val(), "buttonId" : data},
        success: function() {
            // Hide the current Button clicked
            $e.hide();
            var $container = $e.closest("div.jcontainer");
            // Get the immediate form for the button
            // find the select inside it and show...
            $container.find('.checkIn').show();
        }
    });
});
$('.locationSelect').change(function(e) {
  if($(this).children(":selected").val() === "CheckOut") {
    $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    $.ajax({
        type: "POST",
        url: "checkout.php",
        // Data used to set the values in Database
        data: { "checkOut" : $(this).val(), "buttonId" : data},
        success: function() {
            // Hide the current Button clicked
            $e.hide();
            var $container = $e.closest("div.jcontainer");
            // Get the immediate form for the button
            // find the select inside it and show...
            $container.find('.finished').show();
            $container.find('reset').show();
        }
    });
  }
  else{
    $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    // gets the id  of select (1 for the first select)
    // You can map this to the corresponding select in database...
    $.ajax({
        type: "POST",
        url: "changeloc.php",
        data: { "locationSelect" : $(this).val(), "selectid" : data},
        success: function() {
            // Do something here
        }
    });
  }
 });
});
</script>

Thanks for all and any help! Please just ask if you need any more details! Thanks!

Please clarify. If your beat is once every 3 seconds, why not just make it more often? — Sparky, Dec 17 '12 at 03:05
I had read that the more often the beat, the more load on the server, making it slower for a large amount of beats — Muhambi, Dec 17 '12 at 03:09
Mmm, 60-100 is enough to warrant result caching server-side. I'm not an expert but suggest that's where you need to concentrate your effort. You also need to devise a stress-test strategy. — Beetroot-Beetroot, Dec 17 '12 at 03:28
Sorry if this is a stupid question, but what is a stress-test strategy? — Muhambi, Dec 17 '12 at 03:43
Stress-testing means exploration of maximal load conditions. A stress-test strategy comprises two parts, (i) devising the means to simulate requests from multiple clients (up to 100 in your case), and (ii) working out which analytic tools on the server will give you measure(s) of load, and which aspect(s) of the application cause it. — Beetroot-Beetroot, Dec 17 '12 at 05:08
A stress-test should be run on a dedicated dev server thus avoiding mutual interference with other dev activities. Of course, if you are a sole developer then you only need one dev server. — Beetroot-Beetroot, Dec 17 '12 at 05:16

score 1 · Accepted Answer · answered Dec 17 '12 at 03:52

Alot of factors could be causing slowness. Some things to consider:

The speed of the heartbeat is not dependent on your client-side javascript code alone. There may be issues with your server-side php code.
Also, a heartbeat every three seconds is very frequent, perhaps too frequent. Check in your browser's developer debug tools that each of the requests is in fact returning a response before the next 3 second interval. It could be that your server is slow to respond and your requests are "banking up".

You could speed your your jQuery a fraction by streamlining your DOM manipulation, eg:

if (msg == "") 
{
    $e.find('.checkIn').show();
    $e.find('.locationSelect, .finished, .reset').hide();
}

Speed Up Jquery heartbeats

1 Answers1