不活动时停止 UpdatePanel答案

【问题标题】：Stop UpdatePanel when Inactive不活动时停止 UpdatePanel
【发布时间】：2009-04-20 19:14:42
【问题描述】：

您好，我想做以下事情：

当浏览器处于非活动状态时，使用 JavaScript 阻止更新面板“更新”，并在它再次处于活动状态时重新启动。我在看：Inacivity with JavaScript。我希望我可以用它来完成我想要的；有人能指出我正确的方向吗？非常感谢！

[编辑] 我正在使用定时器进行更新，所以如果我能以某种方式从 JavaScript 中禁用定时器，我想我可以做到这一点。

【问题讨论】：

请问您为什么要这样做？
我正在从雅虎财经提取数据，我不想在没有人查看页面时提取数据。
最终用户是否可以控制何时拉取数据，或者是否定期更新数据？

【解决方案1】：

我推荐阅读这本书：http://oreilly.com/catalog/9780596527471/。它告诉您需要了解的有关 ASP.NET AJAX UpdatePanel 控件的所有信息。 API文档请访问：http://msdn.microsoft.com/nb-no/library/bb311028(en-us).aspx。

【讨论】：

【解决方案2】：

如何利用当前窗口对象的“mousemove”事件？如果鼠标已移动，请将计时器设置为 1 分钟左右，然后停用事件。使用 setInterval() 重复此循环。

如果用户打盹了一段时间，它也会有所帮助。

【讨论】：

【解决方案3】：

window.blur = function() { stopTimer() }
window.focus = function() { startTimer() }

浏览器兼容性可能适用。希望这会有所帮助。

【讨论】：

【解决方案4】：

我在这里找到了一个潜在的解决方案：http://www.thefutureoftheweb.com/blog/detect-browser-window-focus

我现在只有 IE8 可以测试，这有几个问题。首先，点击页面上的各种元素会触发focusin 事件，因此您需要一种方法来检查计时器是否已经在运行。这不是太难。 ie8 还会在您单击时触发focusout 事件，因此我们必须延迟实际的计时器停止以确保窗口实际上没有焦点。幸运的是，当您单击页面时，ie8 似乎总是在 focusout 之后立即触发 focusin，因此我们可以取消 focusin 处理程序上的未决计时器关闭。

我认为这应该非常接近可行的解决方案。（改编自链接）

// indicates if your refresh timer is running
var updatePanelTimerRunning = true;

// timer id for shutdown procedure
var killTimerID = -1;

function stopTimer(e) {
    // prepare to shutdown
    if (updatePanelTimerRunning && killTimerID == -1) {
        killTimerID = setTimeout(timerShutdown, 1000);
    }
}

function startTimer(e) {

    // cancel pending timer shutdown
    clearTimeout(killTimerID);
    killTimerID = -1;

    if (!updatePanelTimerRunning) {
        // TODO start the update panel refresh timer here
        updatePanelTimerRunning = true;
    }
}

function timerShutdown() {
    // TODO do actual update panel timer stopping here.
    updatePanelTimerRunning = false;
}


if (/*@cc_on ! @*/ false) { // check for Internet Explorer

    document.attachEvent('onfocusin', startTimer);
    document.attachEvent('onfocusout', stopTimer);
}
else {
    // window.onfocus = stopTimer;
    // window.onblur = startTimer;

    window.addEventListener('focus', startTimer, false);
    window.addEventListener('blur', stopTimer, false);
}

【讨论】：

【解决方案5】：

将此脚本添加到 head 事件中，

<script type ="text/javascript">
    var timerEnabled = true;

    function ToggleTimer(btn, timerID)
    {
        // Toggle the timer enabled state
        timerEnabled = !timerEnabled;

        // Get a reference to the Timer
        var timer = $find(timerID);
        if (timerEnabled)
        { 
            btn.value = 'Pause';
            // Start timer
            timer._startTimer();
        }
        else
        {
            btn.value = 'Resume'; 
            // Stop timer
            timer._stopTimer();
        }            
    }
</script>

在更新面板内添加一个asp.net标签控件进行测试

<asp:Label Id="Label1" Text="" runat="server" />

在更新面板外添加一个html按钮

<input type="button" id="btntimercontroller" value="Pause" onclick="return ToggleTimer(btntimercontroller, '<%= ajaxtimer.ClientID%>');" />

检查计时器是否停止在 aspx.cs 文件中添加此代码

protected void Page_Load(object sender, EventArgs e)
{       
    Label1.Text = DateTime.Now.ToLongTimeString();    
}

只需在脚本中省略 (") 标记，因为它会导致错误...

【讨论】：