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!

Answer 1

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();
  }