JavaScript setInterval 函数不更新 <div> 元素中的 Gridview

Posted 2023-04-12

【中文标题】JavaScript setInterval 函数不更新 <div> 元素中的 Gridview

【英文标题】：JavaScript setInterval function not updating Gridviews in <div> elements

【发布时间】：2018-09-05 00:41:24

【问题描述】：

我有 2 个项目，我使用的标签（至少用于测试）会随着上次更新时间刷新。但是，元素内的 GridView 只更新一次。数据在控制台应用程序中正常解析并写出，所以我不确定打嗝是什么。奇怪的是，虽然它确实为第一次迭代加载数据，但不会刷新新数据。

是不是 setInterval 函数不起作用？我已经尝试过了，并且我发现了一个递归 setTimeout 函数，但都没有奏效。两者都包含在显示尝试 1 和 2 的 cmets 中。

编辑如果我只是一个 alert()，尝试 2 有效，但调用 C# 方法使其只运行一次。

任何帮助将不胜感激。

这是页面：

    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <link href="CSS/Stylesheet.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        function ProcessData() //Attempt 1
        
            <%Process_Data();%>
            setTimeout(ProcessData, 3000);
        
        setInterval(function () 
            ProcessData()
        , 3000);

    </script>
      <script type="text/javascript">     // Attempt 2
        function ProcessData()
        
            <%Process_Data();%> 
            setTimeout(ProcessData(), 5000);
        
        ProcessData();
    </script>


    <div class="Images">
        <asp:Label ID="Label1" runat="server" Text="123"></asp:Label><br />
        <asp:Label ID="Label2" runat="server" Text="123"></asp:Label><br />
    </div>
    <div id="dnrLeft" class="DonorsLeft">
        <div class="col-md-4">
            <asp:GridView ID="dnrResultsLeft" runat="server" HorizontalAlign="Left" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="DonorName" HeaderText="" />
                    <asp:BoundField DataField="Club" HeaderText="" />
                </Columns>
            </asp:GridView>
        </div>
    </div>
    <div id="dnrRight" class="DonorsRight">
        <div class="col-md-4">
            <asp:GridView ID="dnrResultsRight" runat="server" HorizontalAlign="Right" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="DonorName" HeaderText="" />
                    <asp:BoundField DataField="Club" HeaderText="" />
                </Columns>
            </asp:GridView>
        </div>
    </div>
</asp:Content>

这是它背后的代码：

namespace DnrBoards

    public partial class DonorBoardOsh : System.Web.UI.Page
    
        List<Donors> dnrs = new List<Donors>();
        protected void Page_Load(object sender, EventArgs e)
        
            using (DnrBrdDataContext DR = new DnrBrdDataContext())
            
                var dnrList = (from d in DR.DonorBoards
                               where (d.SiteLocation == "OSH") && (d.Club != "0 Donations")
                               orderby d.Donation_Type, d.Donation_Sum, d.Donor ascending
                               select new
                               
                                   _DonorName = d.Donor.ToString(),
                                   _Club = d.Club
                               ).ToList();
                foreach (var item in dnrList)
                
                    dnrs.Add(new Donors(item._DonorName, item._Club));
                
            
            Label2.Text = "Last data pull at: " + DateTime.Now.ToString();
               

        protected void Process_Data()
        
            List<Donors> dlLeft = new List<Donors>();
            List<Donors> dlRight = new List<Donors>();
            for (int i = 0; i < 43; i++)
            
                try
                
                    dlLeft.Add(dnrs[0]);
                    dnrs.RemoveAt(0);
                
                catch  
            
            for (int i = 0; i < 43; i++)
            
                try
                
                    dlRight.Add(dnrs[0]);
                    dnrs.RemoveAt(0);
                
                catch  
            
            dnrResultsLeft.GridLines = GridLines.None;
            dnrResultsLeft.DataSource = dlLeft;
            dnrResultsLeft.DataBind();

            dnrResultsRight.GridLines = GridLines.None;
            dnrResultsRight.DataSource = dlRight;
            dnrResultsRight.DataBind();

            dlLeft.Clear();
            dlRight.Clear();
            Label1.Text = "Last Refresh: " + DateTime.Now.ToString();
        
    

【参考方案1】：

Page_Load 将在每次回调更新时运行，因此 dnrs 将始终在每次更新时使用数据库中的新数据进行更新，即使您在上一次删除它也是如此。

RemoveAt(i) 的逻辑很奇怪。 RemoveAt() 在指定位置从列表中删除一个项目，但每次迭代都会增加位置。同时，每次迭代数组都会变小（因为您要删除一个项目），因此当您完成列表的一半时将开始失败。如果您打算每次都从列表中取出第一项，您应该add( dnrs[0]) 和RemoveAt(0)。这将从列表中添加第一项，然后将其从 dnrs 中删除，这意味着在下一次迭代中，下一项现在将位于索引 0。

【讨论】：

即使在更新面板内部触发或触发了计时器？我已经用相同的结果测试了两者。您能否为如何处理它提供更好的选择？ RemoveAt(0) 绝对是一个有用的建议，我错过了那部分。