Question

我是一个非常新的程序员，他创建了一个应用程序，每隔3秒向php页面发送一次心跳并返回一个值，该值的值决定显示哪些表单元素。我对结果非常满意，但我希望我的jquery尽可能快速有效（目前它有点慢）。我非常确定已经有一些关于加速心跳的有用答案，但我searched找不到任何答案。

所以这是我的代码（只是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>

感谢所有人和任何帮助！请问您是否需要更多细节！谢谢！

Answer 1

很多因素可能导致缓慢。有些事情需要考虑：

心跳的速度并不仅取决于您的客户端JavaScript代码。您的服务器端php代码可能存在问题。
此外，每隔三秒钟的心跳非常频繁，可能太频繁。检查浏览器的开发人员调试工具，确保每个请求实际上在下一个3秒间隔之前返回响应。可能是您的服务器响应缓慢，而您的请求正在“结束”。

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

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

加速Jquery心跳

1 个答案: