Jquery $ .post到PHP腳本時間滯後

我有一個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代碼發送它的ID到一個PHP腳本，使得一個用戶點擊數據庫查詢並建立與結果的下拉列表：

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>"; 
}

我第一次點擊列表項的一切作品之一快速下拉框出來正確。問題是，當我點擊下一個列表項目時，代碼需要幾秒鐘的時間才能建立新的下拉列表來替代舊的列表項目。每次在不同的列表項上單擊新的點擊時間都會增加構建下拉列表所需的時間，直到每次需要更多時間。

查詢的數據庫表只有12條記錄，一般最多隻返回1或2行。

我是PHP/jQuery的新手，想知道是否在我的代碼中有明顯的明顯減緩這個過程。

感謝您看看我的問題！

來源

2012-03-31 JackBurton

聽起來像是一個多重綁定問題給我。只是一個猜測，但也許你每次POST返回時都會將點擊功能添加到可點擊的項目中。所以，下次你點擊，它會運行兩次POST。然後三次。這是每次添加一個新請求以及每次添加冗餘DOM操作。

但是，它在示例中查找的代碼並未顯示再次發生點擊限制的明顯跡象。所以即使我有一個建議，這在黑暗中也是一種鏡頭。

（附註：沒有理由通過jQuery添加CSS這裏只是把這個規則到你的樣式表我已經從樣品消除它！）

現在，我不知道您的標記，所以我打算安全起見，並使用document作爲我的建議監聽者來幫助避免多重綁定。基本上，這裏的第一個選擇器理想情況下是一個真正的節點，它不會作爲Ajax調用的一部分被銷燬。它在首頁加載時呈現，然後再也不會呈現。例如，您可以使用$('#someContainer').on(/* ... */)。我只會使用文檔。

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

現在，這是真正重要的事情，你SEEM在你的樣品做，但可能不是。當第一次加載頁面時，此文檔就緒功能只能觸發一次。一個真正的文檔就緒功能，正如它打算的那樣。不要把它放在任何可能被解僱的功能裏面。

快速判斷是否綁定多次的方法是打開Firebug或Webkit開發者工具...您將看到POST HTTP請求。如果有多個人被點擊一次，只要找出爲什麼它再次被綁定。

來源

2012-03-31 05:58:15

感謝您的建議，我的螢火看着它，我想我的主要問題是，當我把我的問題PHP代碼，我離開了兩條線，我呼應了一些東西像這樣回聲「」這是一個JavaScript文件，其中包含一些我需要在填充下拉列表後需要工作的功能。正是這個文件被加載了複合次數並造成了減速。這個js文件不需要每次有人點擊列表項時加載，但是如果我評論回顯腳本文件，我的頁面就會崩潰。 – JackBurton 2012-03-31 06:27:33

你應該考慮優化你的傳輸方法以及處理它的JS。

首先，你的腳本每次點擊都會造成「胖」。也就是說，有過多的jQuery調用。您可以優化成這樣：

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

爲你的PHP的回覆，你至少應該使用JSON運輸，而不是HTML，使其發光。您可以使用json_encode將PHP數組轉換爲JSON字符串以進行傳輸。

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

這將打印以下JSON字符串比打印HTML更好：

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

現在，在POST請求，jQuery的直覺將其轉換成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); 

}

來源

2012-03-31 06:11:47 Joseph

Jquery $ .post到PHP腳本時間滯後

回答

相關問題