点击按钮后加载计时器无法立即执行的C#与JS问题

点击按钮后，希望在业务处理前立即启动加载计时器，让用户看到系统正在加载的动态效果，但当前代码只会在处理完成后执行计时器逻辑，最终只显示“Loading Done!”，无法在处理过程中展示动态加载状态。

当前代码 #

C# 代码 #

protected void OnSearchClick(object sender, System.EventArgs e)
{
    // Starting of the code（业务处理逻辑）

    // 注册启动计时器脚本
    ClientScript.RegisterStartupScript(this.GetType(), "startTimer", "startTimer();", true);

    // Ending of the code（业务处理逻辑）

    // 注册停止计时器脚本
    ClientScript.RegisterStartupScript(this.GetType(), "stopTimer", "stopTimer();", true);
}

前端代码 #

<div id="loadingContainer" style="display: none;">Loading<span id="timerDisplay"></span></div>
<script type="text/javascript">
    var timerInterval;

    function startTimer() {
        var loadingContainer = document.getElementById('loadingContainer');
        var timerDisplay = document.getElementById('timerDisplay');
        var dotStates = ['.', '..', '...'];
        var currentDotState = 0;

        loadingContainer.style.display = 'block';

        timerInterval = setInterval(function () {
            timerDisplay.textContent = dotStates[currentDotState];
            currentDotState = (currentDotState + 1) % 3;
        }, 1000);
    }

    function stopTimer() {
        clearInterval(timerInterval);
        document.getElementById('timerDisplay').textContent = "Done! ";
    }
</script>

问题原因 #

服务器端代码是同步执行的：你先注册startTimer脚本，接着执行中间的业务逻辑，最后注册stopTimer脚本。但服务器会把所有脚本一次性返回给客户端，导致startTimer和stopTimer几乎同时执行，计时器刚启动就被停止，自然看不到动态加载效果。

解决方案 #

采用前端触发计时器+AJAX异步调用业务逻辑的方式，让客户端先启动计时器，再调用服务器的业务接口，完成后再停止计时器。

修改后的代码示例 #

前端代码（含AJAX调用）

<div id="loadingContainer" style="display: none;">Loading<span id="timerDisplay"></span></div>
<button id="searchBtn">搜索</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
    var timerInterval;

    function startTimer() {
        var loadingContainer = document.getElementById('loadingContainer');
        var timerDisplay = document.getElementById('timerDisplay');
        var dotStates = ['.', '..', '...'];
        var currentDotState = 0;

        loadingContainer.style.display = 'block';
        timerDisplay.textContent = '';

        timerInterval = setInterval(function () {
            timerDisplay.textContent = dotStates[currentDotState];
            currentDotState = (currentDotState + 1) % 3;
        }, 1000);
    }

    function stopTimer() {
        clearInterval(timerInterval);
        document.getElementById('timerDisplay').textContent = "Done! ";
    }

    // 绑定按钮点击事件，前端触发逻辑
    document.getElementById('searchBtn').addEventListener('click', function() {
        startTimer();
        // AJAX调用后台业务方法
        $.ajax({
            type: "POST",
            url: "YourPage.aspx/DoSearch", // 替换成你的页面路径
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(response) {
                stopTimer();
                // 这里可以处理业务返回的结果，比如更新页面内容
                console.log('业务处理完成：', response.d);
            },
            error: function(xhr, status, error) {
                stopTimer();
                alert('业务处理出错：' + error);
            }
        });
    });
</script>

后台C#代码（封装为WebMethod）

using System.Web.Services;

public partial class YourPage : System.Web.UI.Page
{
    // 标记为WebMethod，允许AJAX调用
    [WebMethod]
    public static string DoSearch()
    {
        // 这里放入原来的业务处理逻辑（即原代码中// Starting of the code到// Ending of the code之间的内容）
        // 模拟业务处理延迟（实际开发中移除）
        System.Threading.Thread.Sleep(3000);
        return "搜索结果已返回";
    }

    // 移除原来的OnSearchClick方法，因为现在由前端AJAX触发业务逻辑
    // protected void OnSearchClick(object sender, System.EventArgs e)
    // {
    //     ...
    // }
}

替代方案（使用UpdatePanel） #

如果不想用AJAX，也可以用ASP.NET的UpdatePanel配合ScriptManager实现局部刷新，同时在页面加载时启动计时器，在UpdatePanel更新完成后停止：

1. 页面添加ScriptManager和UpdatePanel：

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="searchBtn" runat="server" Text="搜索" OnClick="OnSearchClick" />
        <!-- 其他业务内容 -->
    </ContentTemplate>
</asp:UpdatePanel>
<div id="loadingContainer" style="display: none;">Loading<span id="timerDisplay"></span></div>

2. 修改前端脚本，监听UpdatePanel的加载事件：

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function() {
    startTimer();
});

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
    stopTimer();
});

3. 后台保留原OnSearchClick方法（移除RegisterStartupScript代码）：

protected void OnSearchClick(object sender, System.EventArgs e)
{
    // 业务处理逻辑
    System.Threading.Thread.Sleep(3000);
}

内容的提问来源于stack exchange，提问作者michael