JQuery事件積累

Question

我正在使用下面加載jQuery動畫圖形，但是，隨後在btnPreviewGraph上點擊，每次結果加載時間變得越來越慢，然後我意識到事件正在積累。有人可以請建議如何防止事件堆積起來。

謝謝。

<script type="text/javascript"> 

     $("#<%=btnPreviewGraph.ClientID%>").click(function() { 

      var Manager = Sys.WebForms.PageRequestManager.getInstance(); 
      Manager.add_endRequest(function() { 
       $(".extras_result").each(function() { 
        // get the width of the bar from the span html 
        var length = $(this).find("span").html(); 
        // Animate the width of the 'p' with a callback function 
        $(this).find("p").animate({ 'width': length }, 700, function() { 
         // once the bar animation has finished, fade in the results 
         $(this).find("span").fadeIn(800); 
        }); 
       }); 
      }); 
     }); 

    </script> 


<asp:Button ID="btnPreviewGraph" runat="server" ClientIDMode="Static" 
       Text="Preview Qualified Statistics" CausesValidation="False"/> 
      <asp:UpdatePanel ID="upnlPreviewChart" runat="server" UpdateMode="Conditional"> 
      <Triggers> 
      <asp:AsyncPostBackTrigger ControlID="btnPreviewGraph" EventName="Click" /> 
      </Triggers> 
      <ContentTemplate> 
     <div class="row"> 
        <asp:Label runat="server" ID="Label1" Text="No. of qualified members" 
         CssClass="label"> 
        </asp:Label> 
       <br /><br /> 
      <table cellpadding="0" cellspacing="0" class="extras_table" style="height: 120px"> 
    <tr> 
    <th class="extras_y-desc" scope="row">Male</th> 
    <td><div class="extras_result"><p class="extras_p">&nbsp;<span><asp:Literal ID="litMaleStats" runat="server"></asp:Literal> 
    </span></p></div></td> 
    </tr> 
    <tr> 
    <th class="extras_y-desc" scope="row">Female</th> 
    <td><div class="extras_result"><p class="extras_p">&nbsp;<span><asp:Literal ID="litFemaleStats" runat="server"></asp:Literal></span></p></div></td> 
    </tr> 
    <tr> 
    <th class="extras_y-desc" scope="row">Unknown</th> 
    <td><div class="extras_result"><p class="extras_p">&nbsp;<span><asp:Literal ID="litUnknownStats" runat="server"></asp:Literal></span></p></div></td> 
    </tr> 
    <tr> 
    <td></td> 
    <td class="extras_x-desc"> 
    </td> 
    </tr> 
</table> 
      </div> 
     </ContentTemplate> 
     </asp:UpdatePanel> 

Answer 1

嘗試使用功能.off（） - jQuery API Documentation .off()

<script type="text/javascript"> 
    $("#<%=btnPreviewGraph.ClientID%>").off('click'); 
    $("#<%=btnPreviewGraph.ClientID%>").on('click', function() { 
     var Manager = Sys.WebForms.PageRequestManager.getInstance(); 
     Manager.add_endRequest(function() { 
      $(".extras_result").each(function() { 
       // get the width of the bar from the span html 
       var length = $(this).find("span").html(); 
       // Animate the width of the 'p' with a callback function 
       $(this).find("p").animate({ 'width': length }, 700, function() { 
        // once the bar animation has finished, fade in the results 
        $(this).find("span").fadeIn(800); 
       }); 
      }); 
     }); 
    }); 
</script> 

Answer 2

它看起來就像你可能會建立在endRequest事件，所以在每一個點擊，你正在做更多的工作。您可以使用.remove_endRequest刪除這些。也許嘗試這樣的事情，所以當功能完成時它會刪除事件。但這並不完美，如果您可以在完成之前再次單擊按鈕，則可能需要在該函數啓動時將其禁用，然後在完成動畫時啓用。

function animateBars() { 
    $(".extras_result").each(function() { 
     // get the width of the bar from the span html 
     var length = $(this).find("span").html(); 
     // Animate the width of the 'p' with a callback function 
     $(this).find("p").animate({ 'width': length }, 700, function() { 
      // once the bar animation has finished, fade in the results 
      $(this).find("span").fadeIn(800); 
     }); 
     var Manager = Sys.WebForms.PageRequestManager.getInstance(); 
     Manager.remove_endRequest(animateBars); 
    }); 
} 
$("#<%=btnPreviewGraph.ClientID%>").click(function() { 
    var Manager = Sys.WebForms.PageRequestManager.getInstance(); 
    Manager.add_endRequest(animateBars); 
});