页面添加Refresh响应头后，如何在弹窗打开时暂停刷新直至关闭？

当然可以实现，但得调整自动刷新的实现方式——原来通过服务器端Refresh响应头设置的自动刷新，是浏览器层面的行为，前端没有办法直接暂停或修改这个刷新指令。所以我们需要把自动刷新逻辑迁移到前端，用JavaScript定时器来控制，这样就能配合弹窗的状态启停刷新了。

步骤1：移除服务器端的Refresh头设置 #

先修改ASP.NET MVC的Dashboard方法，删掉原来添加Refresh响应头的代码：

public ActionResult Dashboard()
{
    // 移除Response.AddHeader("Refresh", "180");
    return View();
}

步骤2：在AngularJS控制器中实现可控制的自动刷新 #

在页面对应的AngularJS控制器里，添加定时器逻辑，并且在弹窗打开/关闭时启停定时器：

angular.module('你的应用模块名').controller('DashboardController', 
['$scope', '$uibModal', '$cookieStore', '$window', 
function($scope, $uibModal, $cookieStore, $window) {
    const REFRESH_INTERVAL = 180000; // 180秒，转换为毫秒
    let refreshTimer = null;

    // 启动自动刷新定时器
    function startRefresh() {
        refreshTimer = setTimeout(() => {
            $window.location.reload();
        }, REFRESH_INTERVAL);
    }

    // 停止自动刷新定时器
    function stopRefresh() {
        if (refreshTimer) {
            clearTimeout(refreshTimer);
            refreshTimer = null;
        }
    }

    // 页面初始化时启动刷新
    startRefresh();

    $scope.openpopup = function (id) {
        // 打开弹窗前先停止刷新
        stopRefresh();

        const modalInstance = $uibModal.open({
            templateUrl: "stuff/Popupstuff/?id=" + id, 
            size: '',
        });

        $cookieStore.put("id", id);

        modalInstance.result.finally(() => {
            $cookieStore.remove("id");
            // 弹窗关闭后重新启动刷新
            startRefresh();
        });
    }
}]);

原理说明 #

• 前端用setTimeout实现的定时器，我们可以通过clearTimeout随时停止，弹窗关闭后再重新创建定时器，就能实现“暂停刷新直到弹窗关闭”的需求。
• 放弃服务器端Refresh头的原因是：这个响应头是浏览器解析后自动执行的，前端没有提供API来修改或暂停这个刷新任务，完全由浏览器控制，无法和弹窗状态联动。

内容的提问来源于stack exchange，提问作者Xuan Tung Dang