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秒ごとのハートビートは非常に頻繁であり、おそらくあまりにも頻繁です。ブラウザの開発者デバッグツールで、各リクエストが実際に次の3秒間隔の前にレスポンスを返していることを確認してください。サーバーの応答が遅く、リクエストが「バンクアップ」している可能性があります。

  • DOM操作を合理化することで、jQueryをわずかに高速化できます。例：

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