Jquery $ .postからPHPスクリプトへのタイムラグ

Question

PHPページには順序付けられていないリストがあります。私は、リスト内の項目のいずれかをクリックして、ユーザーを待って、いくつかのjQueryコードを持っています。ユーザーはこれらの項目のいずれかをクリックすると

$(function() { 
$('li.large_box').css('cursor', 'pointer') 
.click(function() { 
    $('#db_sections').empty(); 
    var show_id = this.id; 
    $.post('get_section_dates.php', { show_id: show_id }, function(sections) { 
    $('#section_dates_feedback').html(sections); 
    }); 
}); 
}); 

jQueryのコードは、作るPHPスクリプトにそれはIDが送信しますデータベースクエリと結果をドロップダウンリストのビルド：

if (isset($_POST['show_id'])) { 
    $show_id = $_POST['show_id']; 
    $result = mysql_query("SELECT `id`,`air_date` FROM `daily_show` WHERE show_id = '".$show_id."'"); 

     echo"<div id='dates_select'>"; 
     echo "<select id='date_select'>"; 
     echo "<option value='0'>Choose a date</option>";   
    while ($query = mysql_fetch_assoc($result)) 
    { 
     $id = $query['id']; 
     $air_date = strtotime($query['air_date']); 
     $date = date("M-d-Y \(D\)",$air_date); 
     echo "<option value='$id'>$date</option>";  
    } 
echo "</select>"; 
echo "</div>"; 
} 

を私はリスト項目のすべてのいずれかをクリックし最初の時間はすぐに動作し、ドロップダウンボックスが正しく出てきます。問題は、次のリスト項目をクリックすると、古いドロップダウンリストの代わりに新しいドロップダウンリストを作成するのに数秒かかります。別のリスト項目をクリックするたびにドロップダウンリストが作成されるまでの時間が合成され、毎回1分以上かかることになります。

照会しているデータベーステーブルはわずか12レコードで、通常は最大で1または2行しか返しません。

私はPHP/jQueryを使い慣れていて、このプロセスを遅くするコードではっきりと明らかなことがあれば疑問に思っていました。

私の問題を見てくれてありがとう！

Answer 1

私には複数の問題があります。ちょうど推測ですが、POSTが返るたびにクリック可能なアイテムにクリック機能を追加している可能性があります。次回クリックするとPOSTが2回実行されます。その後、3回。そのたびに新しいリクエストが追加され、毎回冗長なDOM操作が追加されています。

ただし、サンプルに表示されているコードでは、クリックが再度バインドされたという明白な兆候は見られません。だから私は提案があっても、暗闇の中で一種のショットです。

（注記：ここでのjQueryを経由してCSSを追加する理由はありませんちょうどあなたのスタイルシートにこのルールを入れて、私はサンプルからそれを排除してきました！）今

を、私はあなたのマークアップを知りませんだから私は安全に遊んで、複数のバインディングを避けるために、私の提案するリスナーとしてdocumentを使用します。基本的に、ここの最初のセレクタは理想的にはAjax呼び出しの一環として決して破壊されない実際のノードです。最初のページの読み込み時にレンダリングされ、その後は再びレンダリングされません。たとえば、$('#someContainer').on(/* ... */)を使用します。私はただドキュメントを使用します。

$(function() { 
    $(document).on('click', '.large_box', function() { 
    /* all the stuff that should happen on click */ 
    }); 
}); 

ここでは、あなたのサンプルではSEEMがやっていることが本当に重要ですが、そうでないかもしれません。この文書準備機能は、ページが最初にロードされたときに1回だけ起動する必要があります。意図された真の文書準備機能。起動される可能性のある機能の中には入れないでください。

複数回バインドされているかどうかを確認する簡単な方法は、FirebugまたはWebkit Developer Toolsを開くことです。POST HTTPリクエストが表示されます。 1回のクリックで複数のユーザーが解雇された場合は、そのユーザーが再度バインドされている理由を把握してください。

Answer 2

トランスポート方法とそれを処理するJSを最適化することを検討する必要があります。

まず、あなたのスクリプトはクリックごとに「太っている」ようになっています。つまり、過剰なjQuery呼び出しがあります。あなたは、少なくともそれが光にするためにHTMLを輸送するためにJSONを使用してはならない、あなたのPHPの返信用として

$(function() { 

    //put into reference static elements 
    $db_sections = $('#db_sections'); 
    $section_dates_feedback = $('#section_dates_feedback'); 

    //delegate event to parent handler using .on() 
    $('the_containing_ul').on('click', 'li.large_box', function() { 
     $db_sections.empty(); 
     $.post('get_section_dates.php', { 
      show_id: this.id 
     }, function(data) { 
      //callback 
     }); 
    }); 
}); 

---

：あなたはこの中にそれを最適化することができます。 json_encodeを使用して、PHP配列をトランスポート用のJSON文字列に変換することができます。 POSTリクエストでは、jQueryのは、直感的に我々が解析できるJSONオブジェクトに変換し、今

[ 
    {"id":"1","air_date":"January 1, 12"}, 
    {"id":"2","air_date":"January 2, 12"}, 
    {"id":"3","air_date":"January 3, 12"}, 
    ... and so on 
] 

---

：

if (isset($_POST['show_id'])) { 

    $show_id = $_POST['show_id']; 
    $result = mysql_query(query_here); 
    $resultArray = mysql_fetch_assoc($result) 

    //do a little formatting before we send over 
    while ($resultArray){ 
     $resultArray['air_date'] = date("M-d-Y \(D\)",strtotime($resultArray['air_date'])); 
    } 

    echo json_encode($resultArray); 
} 

これは、印刷HTMLよりも優れている、次のJSON文字列を出力します。これを使用して選択ボックスを生成することができます。これは、コールバックされます：あなたの提案のための

function(data) { 

    //create a select and div, and append it to a div 
    $div = $('<div id="dates_select" />'); 
    $select = $('<select id="date_select" />').appendTo($div); 

    //create options based on data and append to select 
    $.each(data,function(index,row){ 
     $('<option />') 
      .attr('value',row.id) 
      .text(row.air_date) 
      .appendTo($select); 
    } 

    //put div into the feedback 
    $section_dates_feedback.html($div); 

}