即使在页面重新加载后仍保留setTimeOut（）调用

Question

我的网站页面结构为1）index.php，它使用ajax调用addline.php，返回的html附加到index.php 2）addline.php使用ajax调用另一个页面more.php，它再次附加返回的html to it 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分钟后触发函数调用。

我该如何实现？

Answer 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) {});
});

上面的代码可能存在错误，但希望你能得到这个想法。