0

我是一个非常新的程序员，他制作了一个应用程序，它每 3 秒向 php 页面发送一次心跳并返回一个值，该值决定了要显示的表单元素。我对结果相当满意，但我想让我的 jquery 尽可能快和高效（目前有点慢）。我很确定 SO 已经有一些关于加快心跳的有用答案，但我搜索并找不到任何答案。

所以这是我的代码（只是 jquery，但如果需要，我可以发布 php 和 html，以及任何需要帮助的人）：

<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>

感谢所有和任何帮助！请询问您是否需要更多详细信息！谢谢！

4

1 回答 1

1

很多因素可能导致缓慢。需要考虑的一些事项：

  • 心跳的速度不仅仅取决于您的客户端 JavaScript 代码。您的服务器端 php 代码可能存在问题。

  • 此外，每三秒心跳一次非常频繁，也许过于频繁。检查浏览器的开发人员调试工具，每个请求实际上都在下一个 3 秒间隔之前返回响应。可能是您的服务器响应缓慢，并且您的请求正在“积压”。

  • 你可以通过简化你的 DOM 操作来加速你的 jQuery，例如：

    if (msg == "") 
{
    $e.find('.checkIn').show();
    $e.find('.locationSelect, .finished, .reset').hide();
}
于 2012-12-17T03:52:26.147 回答