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（）を試してみてください - すべてのクリックで、あなたも、より多くの仕事をやっているので、あなたは、EndRequestのイベントを構築することができるように見えます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

を。 .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); 
});