即使在页面重新加载后仍保留 setTimeOut() 调用答案

【问题标题】：Retaining setTimeOut() call even after page reload即使在页面重新加载后仍保留 setTimeOut() 调用
【发布时间】：2011-02-03 08:05:03
【问题描述】：

我的网站页面结构为 1) index.php 使用 ajax 调用 addline.php 并将返回的 html 附加到 index.php 2) addline.php 调用另一个页面 more.php 使用 ajax 再次将返回的 html 附加到它 3）more.php再次调用另一个文件update.php，在update.php中，我有我的以下js代码

var number = parseInt("<?php echo $delFlag; ?>");
    if ( number == 1) {
        // Calling updateLine() function after 5 mins
        timer = setTimeout("updateLine()",1000*5*60);   

    }

    function updateLine() {
            var flagId = <?php  echo $flagId; ?>;
        var dataPass = 'flagId=' + flagId;
        $.ajax({
            type: "POST",
            url: "proc/updateLine.php",
            data: dataPass,
            cache: false,
            success: function(){
                // Show error if error is there
            }
        }); 
    }

一直以来，我的位置仍然是 index.php。

如果我不重新加载页面，javascript 函数可以正常工作。如果我重新加载页面，它就不起作用。我希望 setTimeOut() 调用即使在重新加载发生后也能在后台激活。它应该会在 5 分钟后触发函数调用。

我如何实现它？？

【问题讨论】：

旁注：你可以使用像setTimeout(updateLine, 3e5);这样的指数
你可以，当页面被刷新时 - 快速设置当前时间的变量和 Cookie 中的函数 - jQuery Cookies 工作得很好......
这个指数是什么？？ 3e5 代表多少分钟？？

标签： php javascript jquery

【解决方案1】：

重新加载页面会重置 Javascript 状态，并且没有直接的方法可以让事情在后台运行。

如果要求在页面重新加载后自动继续超时计数器，那么计数器状态必须以某种方式保持。

这意味着必须考虑每次超时开始。一种选择是使用 PHP 和 load 和 unload 事件，如下所示：

// timeout.php -- persists and returns the last timeout start by session
<?php

session_start();
$key = 'lastTimeoutStart';

if (isset($_GET[$key]))
    $_SESSION[$key] = $_GET[$key];
else if (isset($_SESSION[$key]))
    echo $_SESSION[$key];

?>

加上处理持久化和加载的 Javascript 部分：

var lastTimeoutStart = 0;

if ( number == 1) {
    // Calling updateLine() function after 5 mins
    lastTimeoutStart = new Date().getTime();
    timer = setTimeout("updateLine()",1000*5*60);   

}

//
// Other code
//

$(document).load(function () {
    $.get('timeout.php', function (data, textStatus, jqXHR) {
        var persistedStart = data.lastTimeoutStart;
        var tempTimeout = persistedStart + 1000*5*60 - new Date().getTime();
        if (tempTimeout > 0) {
            clearTimeout(timer);
            timer = setTimeout("updateLine()", tempTimeout);
        }
    });
});

$(document).unload(function () {
    var data = {"lastTimeoutStart": lastTimeoutStart};
    $.get('timeout.php', data, function (data, textStatus, jqXHR) {});
});

上述代码中可能存在错误，但希望您能理解。

【讨论】：