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

JQuery事件累积

2 个答案: