jquery - 多次 ajax 调用后 Web 浏览器变得缓慢或无响应

Question

我对jquery和ajax完全是新手，我最近的项目是帮助代表(reps)在线管理客户报价。我有一个页面，在一个大表中显示所有报价。

在单击某个代表的姓名后，我成功地使用 ajax 来获取并显示与该代表关联的报价。但唯一的问题是响应速度。最初的几次点击都还可以，而且非常流畅。但尝试了几次后，响应变得很慢，甚至无法向下滚动网页，后来浏览器就崩溃了......

请看一下我的ajax代码。这是:

<!-- Data display area -->
<br /><input type="image" id="printbtn" value="Print" src="images/printer.png"/><br />

  <div id="container">
    <div id="content">

    </div>  
  </div>  
<!-- Data display area -->  

<!-- AJAX FETCH QUOTES DATA + Tablesorter + FIXED TABLE HEADER--> 
<script type="text/javascript">
//<![CDATA[ 
$(function(){

$("a.repID").click(function(){ 
    $('div#loader').append("<p align='center'><img src='images/loadingbar2.gif' id='loading' /></p>"); 
 var repID = $(this).attr("title");   

$.ajax({
    type:'POST',
    url:'quote_info.php',
    data:'repID=' + repID,
    cache: false,

    success:function(data)
    {
       $("#container").html('<div id="content">' + data + '</div>');
       $("#loading").fadeOut(500, function() {$(this).remove();});
       $("#sortme").tablesorter();
       $('.tbl').fixedtableheader(); 
    }
});
return false;
});
});
</script>
<!-- AJAX FETCH QUOTES DATA + Tablesorter + FIXED TABLE HEADER-->

发现问题，成功处理程序内的表排序器和固定 header 导致了问题，但如果我将它们放在处理程序之外，它们将无法工作，我应该将它们放在哪里？或者我应该怎么做才能拥有这两个功能，非常感谢!!!

服务器端php代码:

<?php
header('Content-Type: text/html; charset=ISO-8859-1');
$conn=mysql_connect("localhost","root","");
mysql_select_db("auma",$conn);

$repID = $_POST['repID'];

if ($repID == "All") {
    $whereClause = "";
} else {
    $whereClause = "WHERE repID='$repID'";
} 

$quoteinfoSQL = "SELECT q.quoteWeek, q.quoteID, q.quoteRev, q.customerName, q.repID, 
             q.quoteDesc, q.quoteValue, q.quoteProject, q.quotePM, q.quoteDR, q.quoteDS, 
             a.followUp, a.quoteStatus, a.furtherAction, a.UKConNo, a.clientRef, a.CorS  
             FROM auma_quote q 
             INNER JOIN auma_action a on a.quoteID = q.quoteID 
             $whereClause  
             ORDER BY q.quoteWeek DESC, q.quoteID DESC";



// execute the statement
$rsQuoteinfo = mysql_query( $quoteinfoSQL );

$html.= "<br />";

if ($repID == "All") {
    $html.= "<img src=\"images/users.png\" />&nbsp; Quotations from all representatives.</h6>";
} else {
    $html.= "<img src=\"images/users.png\" />&nbsp; Quotations from <b>$repID</b>.</h6>";
} 



$html.= "<br />";


$html.= "<table id=\"sortme\" class=\"tbl\">";
$html.= "<thead>";
$html.= "<tr>
         <th>Week</th>
         <th>Quote ID</th>
         <th>Rev</th>
         <th>Customer</th>
         <th>Rep ID</th>
         <th>Description</th>
         <th>Gross Value</th>
         <th>Project</th>
         <th>GP%</th>
         <th>Date Received</th>
         <th>Date Sent</th>
         <th>Follow up Action</th>
         <th>Result</th>
         <th>Further Action</th>
         <th>UK Contract No.</th>
         <th>Client Ref.</th>
         <th>Contractor or Specification</th>
         <th></th>
         </tr>";
$html.= "</thead>";
$html.= "<tbody>";

while($quoteinfoRow = mysql_fetch_array($rsQuoteinfo)){
    $quoteWeek = $quoteinfoRow['quoteWeek'];
    $quoteRev = $quoteinfoRow['quoteRev'];
    $customerName = htmlspecialchars($quoteinfoRow['customerName']);
    $repIDs= $quoteinfoRow['repID'];
    $quoteID= $quoteinfoRow['quoteID'];
    $quoteDesc = htmlspecialchars($quoteinfoRow['quoteDesc']);
    $quoteValue = htmlspecialchars($quoteinfoRow['quoteValue']);
    $quoteProject = htmlspecialchars($quoteinfoRow['quoteProject']);
    $quotePM = $quoteinfoRow['quotePM'];
    $quoteDR = $quoteinfoRow['quoteDR'];
    $quoteDS = $quoteinfoRow['quoteDS'];
    $followUp = htmlspecialchars($quoteinfoRow['followUp']);
    $quoteStatus = htmlspecialchars($quoteinfoRow['quoteStatus']);
    $furtherAction = htmlspecialchars($quoteinfoRow['furtherAction']);
    $UKConNo = $quoteinfoRow['UKConNo'];
    $clientRef = $quoteinfoRow['clientRef'];
    $CorS = htmlspecialchars($quoteinfoRow['CorS']);

    $html.= "<tr>";
    $html.= "<td>$quoteWeek</td>";
    $html.= "<td>$quoteID</td>";
    $html.= "<td>$quoteRev</td>";
    $html.= "<td>$customerName</td>";    
    $html.= "<td>$repIDs</td>";
    $html.= "<td>$quoteDesc</td>";
    $html.= "<td>$quoteValue</td>";
    $html.= "<td>$quoteProject</td>";
    $html.= "<td>$quotePM</td>";
    $html.= "<td>$quoteDR</td>";
    $html.= "<td>$quoteDS</td>";
    $html.= "<td>$followUp</td>";
    $html.= "<td>$quoteStatus</td>";
    $html.= "<td>$furtherAction</td>";
    $html.= "<td>$UKConNo</td>";
    $html.= "<td>$clientRef</td>";
    $html.= "<td>$CorS</td>";

    $html.= "<td align=\"center\"><a href=\"quotedetails.php?quoteID=$quoteID&amp;customerName=$customerName\" ><input type=\"image\" src=\"images/edit.png\" /></a></td>";

    $html.= "</tr>";
}  // while



$html.= "</tbody>";
$html.= "</table>";
$html.= "<br />";
echo $html;


?>

Firebug 的响应示例:

<br /><img src="images/users.png" />&nbsp; Quotations from <b>NA</b>.</h6>
<br />
<table id="sortme" class="tbl">
<thead>
<tr>

         <th>Week</th>

         <th>Quote ID</th>

         <th>Rev</th>

         <th>Customer</th>

         <th>Rep ID</th>

         <th>Description</th>

         <th>Gross Value</th>

         <th>Project</th>

         <th>GP%</th>

         <th>Date Received</th>

         <th>Date Sent</th>

         <th>Follow up Action</th>

         <th>Result</th>

         <th>Further Action</th>

         <th>UK Contract No.</th>

         <th>Client Ref.</th>

         <th>Contractor or Specification</th>

         <th></th>

         </tr>
</thead>
<tbody>
<tr>
<td>9</td>
<td>Q42389</td>
<td>0</td>
<td>Worldwide Procurement Services Ltd</td>
<td>NA</td>
<td>1 x Motor (Z011.274)</td>
<td>£2,954</td>
<td>COM: 649862</td>
<td>spares net</td>
<td>2010-02-28</td>
<td>2010-03-03</td>
<td></td>
<td>ORDERED</td>
<td></td>
<td>28824</td>
<td></td>
<td></td>
<td align="center"><a href="quotedetails.php?quoteID=Q42389&amp;customerName=Worldwide Procurement Services Ltd" ><input type="image" src="images/edit.png" /></a></td>
</tr>
<tr>
<td>1</td>
<td>Q41883</td>
<td>1</td>
<td>Ital (International Trading Alliance) Ltd</td>
<td>NA</td>
<td>1xSAM10.1E75</td>
<td>£2,059</td>
<td>COM: 553697</td>
<td>25% net</td>
<td>2010-01-05</td>
<td>2010-01-08</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td align="center"><a href="quotedetails.php?quoteID=Q41883&amp;customerName=Ital (International Trading Alliance) Ltd" ><input type="image" src="images/edit.png" /></a></td>
</tr>
</tbody>
</table>
<br />

Answer 1

嗯，不太确定，但如果您不是每次都删除(或覆盖)#sortme 或 .tbl，那么这些行可能与您的性能问题有关:

$("#sortme").tablesorter();
$('.tbl').fixedtableheader();

我对这些函数没有深入的了解，但可能每次执行 Ajax 调用时都会将处理程序绑定(bind)到元素。只需将它们绑定(bind)一次，看看是否会变得更好。

更新:

也许将它们放在外面就足够了，例如:

$(function() {
    $("#sortme").tablesorter();
    $('.tbl').fixedtableheader();

    $("a.repID").click(function(){...});  
});

对于 tablesorter 插件，它有一个 update 方法(请参阅 examples )，因此您可以将其放入您的 success 方法中:

success: function(date) {
    //...
    $("#sortme").trigger("update"); 
}