即使页面重新加载后仍保留setTimeOut()调用 [英] Retaining setTimeOut() call even after page reload

问题描述

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

I've my site pages structure as 1) index.php which calls addline.php using ajax and the html returned is appended to the index.php 2) the addline.php calls another page more.php using ajax which again appends the returned html to it 3) Again more.php calls another file update.php and in the update.php, I've my following js codes

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.

All the time, my location is still index.php.

如果我不重新加载页面，则javascript函数将正常运行.如果我重新加载页面，它将无法正常工作.我希望即使在重新加载后，setTimeOut()调用在后台仍处于活动状态.它应该在5分钟后触发函数调用.

The javascript function works properly if I do not reload the page. If I reload the page, it doesn't work. I want the setTimeOut() call to be active in the background even after the reload takes place. It should trigger the function call after 5 mins.

我该如何实现?

推荐答案

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

Reloading a page resets the Javascript state and there is no direct way to keep things running in the background.

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

If the requirement is to continue the timeout counter automatically after the page reload, then the counter state has to be persisted somehow.

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

It means that every timeout start has to be accounted for. One option would be to do it with PHP and load and unload events, along the lines of:

// 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部分:

Plus the Javascript part that handles persisting and loading:

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

上面的代码中可能存在错误，但希望您能理解.

There may be bugs in the above code but hopefully you get the idea.

这篇关于即使页面重新加载后仍保留setTimeOut()调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！