每当任何一个 AJAX 计时器触发时，JQuery 都会重新运行

Question

我在一个页面上有 2 个部分，左侧部分和右侧部分。

Left Section 在条件更新面板中，依赖于 Timer1。

右侧部分在条件更新面板中，并且依赖于计时器 2。

右侧部分有一个 JQuery 图片循环。即使 Timer 1 触发，JQuery 图片周期也会刷新，我认为这是因为 JQuery 代码与更新面板无关，并且在更新面板之外注册（即使物理代码在更新面板内）。

我正在尝试以与左侧部分不同的频率更新右侧部分，但是左侧部分正在通过 JQuery 刷新右侧部分。

这里是支持代码：

<div style="float:left; width:965px; height:1080px; background:White url(App_Themes/TheNest/images/TV/Daily-Specials.jpg) no-repeat 0 0; overflow:hidden;"> 
        <!-- Daily Specials --> 
        <div style="margin-left:25px; margin-top:295px; margin-bottom:10px; margin-right:10px;"> 
        <span style="float:right; color:White; font-size:45px;"><%=clsNaitsa.GetMonth(dTodaysDate.Month)%> <%=dTodaysDate.Day%>, <%=dTodaysDate.Year%></span> 
        <div style="clear:both; margin-bottom:100px;"></div> 
            <div style="overflow:hidden; height:685px;"> 
                <div id="Specials"> 
                <asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional">   
                    <ContentTemplate> 
                    <asp:Timer runat="server" id="Timer1" Interval="10000" OnTick="Timer1_Tick"></asp:Timer> 
                    <asp:Label ID="Label1" runat="server" Text="No Refresh Yet"></asp:Label> 
                    <ul class="DailySpecials">   
                        <asp:PlaceHolder ID="ph_Specials" runat="server"></asp:PlaceHolder> 
                    </ul>                         
                    </ContentTemplate> 
                </asp:UpdatePanel> 
                </div> 
            </div> 
        </div> 
    </div> 
    <div style="float:left; width:955px; height:1080px; overflow:hidden;"> 
    <asp:UpdatePanel runat="server" id="UpdatePanel2" UpdateMode="Conditional">   
        <ContentTemplate> 
        <asp:Timer runat="server" id="Timer2" Interval="25000" OnTick="Timer2_Tick"></asp:Timer> 
        <asp:Label ID="Label2" runat="server" Text="No Refresh Yet"></asp:Label> 
        <div class="pics"> 
                <img src="App_Themes/TheNest/images/TV/Pirate-tv-ad.jpg" alt="Pirate Boat Party" /> 
                <img src="App_Themes/TheNest/images/TV/Elections-tv-ad.jpg" alt="Senate and Student Services Elections" /> 
                <img src="App_Themes/TheNest/images/TV/Top-Model-TV-ad.jpg" alt="NAITSA's Next Top Model" /> 
                <img src="App_Themes/TheNest/images/TV/Sponsor-Thank-You.jpg" alt="Sponsors Thank-You" /> 
        </div> 
            <script type="text/javascript" language="javascript">  
            //WILL RUN DURING ASYNC POST-BACKS 
            function pageLoad() { 
                $('.pics').unbind(); 
                $('.pics').cycle({ 
                    fx: 'fade', 
                    timeout: 5000, 
                    speed: 1000 
                }); 
            }     

        // WILL RUN ONCE DURING INITIALIZATION - ASYNC POST-BACKS WILL NOT RUN AGAIN AND CYCLE BREAKS 
        //      $(document).ready(function() { 
        //          $('.pics').cycle({ 
        //          fx: 'fade', 
        //          timeout: 5000, 
        //          speed: 1000 
        //          }); 
        //      }); 
            </script>        
        </ContentTemplate> 
    </asp:UpdatePanel> 
    </div> 

 //CODE BEHIND
  protected void Page_Load(object sender, EventArgs e) 
{         
    ScriptManager1.RegisterAsyncPostBackControl(Timer1); 
    ScriptManager1.RegisterAsyncPostBackControl(Timer2); 

    dTodaysDate = DateTime.Now; 
    if(!Page.IsPostBack) 
        LoadSpecials(); 
}  

protected void Timer1_Tick(object sender, EventArgs e) 
{ 
    UpdatePanel1.Update(); 
    Label1.Text = DateTime.Now.ToString(); 
    LoadSpecials(); 
} 

protected void Timer2_Tick(object sender, EventArgs e) 
{        
    UpdatePanel2.Update(); 
    Label2.Text = DateTime.Now.ToString();        
}

Answer 1

您可以通过以下方式检测异步回发何时发生：

function pageLoad(sender, e) { 
  if (!e.get_isPartialLoad()) {
     //Do one time task
  }
}

但是，从客户端确定更新哪个更新面板可能很有趣。可以确定，然后调用循环插件。或者，您可以将插件代码放在单独的方法中：

function cycle() {
   $('.pics').unbind(); 
                $('.pics').cycle({ 
                    fx: 'fade', 
                    timeout: 5000, 
                    speed: 1000 
                }); 
}

并尝试从服务器调用它：

ScriptManager.RegisterStartupScript(.., "cycle();");

当适当的计时器触发时。

Answer 2

感谢您的回复。我不太了解 e.get_isPartialLoad()，因为我不知道如何检查从 JavaScript 触发的 asp.net 更新面板事件，因为我不使用大量 JavaScript（试图了解更多 java）。

但是，我理解您的第二个答案，这很棒。与其将我的 JQuery Cycle 放在 pageLoad() 或 Document.Ready() 中，不如将它放在自己的函数中解决了我所有的问题 :)。既然 Cycle 不在特定于页面的函数中，我可以随时调用或重新初始化它，并且它不会在部分回发期间不断被调用。

这是我使用的解决方案修改后的代码，现在右侧部分只会在 Timer2 触发时重新启动 JQuery：

    <script type="text/javascript" language="javascript">    
function cycle() {
    $('.pics').unbind();
    $('.pics').cycle({
        fx: 'fade',
        timeout: 5000,
        speed: 1000
    });
}         
</script>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="width:1920px; height:1080px; overflow:hidden;">  
    <div style="float:left; width:965px; height:1080px; background:White url(App_Themes/TheNest/images/TV/Daily-Specials.jpg) no-repeat 0 0; overflow:hidden;">
        <!-- Daily Specials -->
        <div style="margin-left:25px; margin-top:295px; margin-bottom:10px; margin-right:10px;">
        <span style="float:right; color:White; font-size:45px;"><%=clsNaitsa.GetMonth(dTodaysDate.Month)%> <%=dTodaysDate.Day%>, <%=dTodaysDate.Year%></span>
        <div style="clear:both; margin-bottom:100px;"></div>
            <div style="overflow:hidden; height:685px;">
                <div id="Specials">
                <asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional">  
                    <ContentTemplate>
                    <asp:Timer runat="server" id="Timer1" Interval="5000" OnTick="Timer1_Tick"></asp:Timer>
                    <asp:Label ID="Label1" runat="server" Text="No Refresh Yet"></asp:Label>
                    <ul class="DailySpecials">  
                        <asp:PlaceHolder ID="ph_Specials" runat="server"></asp:PlaceHolder>
                    </ul>                        
                    </ContentTemplate>
                </asp:UpdatePanel>
                </div>
            </div>
        </div>
    </div>
    <div style="float:left; width:955px; height:1080px; overflow:hidden;">
    <asp:UpdatePanel runat="server" id="UpdatePanel2" UpdateMode="Conditional">  
        <ContentTemplate>
        <asp:Timer runat="server" id="Timer2" Interval="15000" OnTick="Timer2_Tick"></asp:Timer>
        <asp:Label ID="Label2" runat="server" Text="No Refresh Yet"></asp:Label>
        <div class="pics">
                <img src="App_Themes/TheNest/images/TV/Pirate-tv-ad.jpg" alt="Pirate Boat Party" />
                <img src="App_Themes/TheNest/images/TV/Elections-tv-ad.jpg" alt="Senate and Student Services Elections" />
                <img src="App_Themes/TheNest/images/TV/Top-Model-TV-ad.jpg" alt="NAITSA's Next Top Model" />
                <img src="App_Themes/TheNest/images/TV/Sponsor-Thank-You.jpg" alt="Sponsors Thank-You" />
        </div> 
        </ContentTemplate>
    </asp:UpdatePanel>
    </div>
</div>

 protected void Page_Load(object sender, EventArgs e)
{        
    ScriptManager1.RegisterAsyncPostBackControl(Timer1);
    ScriptManager1.RegisterAsyncPostBackControl(Timer2);

    dTodaysDate = DateTime.Now;
    if (!Page.IsPostBack)
    {
        Page page = (Page)HttpContext.Current.CurrentHandler;
        ScriptManager.RegisterStartupScript(page, this.GetType(), "JQueryCycle", "cycle();" ,true);
        LoadSpecials();

    }
}

protected void Timer1_Tick(object sender, EventArgs e)
{
    UpdatePanel1.Update();
    Label1.Text = DateTime.Now.ToString();
    LoadSpecials();
}

protected void Timer2_Tick(object sender, EventArgs e)
{       
    UpdatePanel2.Update();
    Label2.Text = DateTime.Now.ToString();
    Page page = (Page)HttpContext.Current.CurrentHandler;
    ScriptManager.RegisterStartupScript(page, this.GetType(), "JQueryCycle", "cycle();", true);       
}