Question

我使用setTimeout（javascript函数）每10秒自动刷新页面，并且在一（1）分钟之后我想停止自动刷新。为此我使用clearTimeout（）javascript函数。我知道这是不可能的，因为每次页面刷新所有javascript变量和函数时都会重新初始化。

我认为这可能来自服务器端（使用会话变量）请帮助我们解决这个问题，提前谢谢.....

我在下面给出的测试代码

<html>
<script type="text/javascript">
var t;
var j;
function load()
{
t=setTimeout("refresh()", 10000);
j=setTimeout("stop()", 60000);

}
function refresh(){
window.location.reload()
load()
}

function stop(){
clearTimeout(t);
}
</script>
</head>
<body onload="load()">
</body>
</html>

Answer 1

您的变量t和j无法在页面重新加载后继续存在（当重新加载页面时，它们会获得全新的值，因此您的stop()函数和其他逻辑无法正常工作）。如果您希望“下一页”重新加载不再自动刷新，那么您将不得不使用某种状态来传达在页面重新加载后仍然存在的状态。您的简单选项是在再次加载页面时设置cookie或使用URL参数。

一种方法是设置cookie以跟踪重新加载：

function load()
{
    reloadCnt = getCookie("cnt") || 0;
    if (reloadCnt < 10) {
        setTimeout(function() {
            setCookie("cnt", reloadCnt + 1, 1);    // cookie that expires in one day
            window.location.reload();
        }, 10000);
    }
}

getCookie和setCookie是来自this library的函数，但可以使用任何cookie访问库。

另一种选择是使用每次增加的查询参数：

function load()
{
    var reloadCnt = 0;
    var re = /reloadCnt=(\d+)/;
    var foundReloadParm = false;
    var parms = window.location.search;
    var matches = parms.match(re);
    if (matches && matches.length > 1) {
        foundReloadParm = true;
        reloadCnt = parseInt(matches[1], 10);
    }
    if (reloadCnt < 10) {
        setTimeout(function() {
            var url;
            if (foundReloadParm) {
                url = window.location.href.replace(re, "reloadCnt=" + (reloadCnt + 1));
            } else {
                if (window.location.href.indexOf("?") == -1) {
                    url = window.location.href + "?reloadCnt=1";
                } else {
                    url = window.location.href + "&reloadCnt=1";
                }
            }
            window.location.replace(url);
        }, 10000);
    }
}

Answer 2

坦率地说，唉！

首先，请不要将字符串传递给setTimeout，这很糟糕。特别是当你甚至没有传递任何参数时。

做这样的事情：

setTimeout(refresh,10000);

这样，您将传递对实际函数的引用，而不是通过代理调用eval()。道格拉斯·克罗克福德会在他的坟墓中转身（如果他已经死了）。

接下来，所有javascript语句都应以;终止，而不仅仅是随机行。

接下来，在t中的超时被触发并且window.location.reload()被调用后，您的代码都不会实际执行任何操作。重新加载页面时，您基本上已经获得了一个带有干净平板的新环境，并且该过程将重新开始。

按照目前的情况，你可以将整个代码简化为：

<html>
<head>
</head>
<body onload="setTimeout(window.location.reload,10000)">
</body>
</html>

要修复它，您需要在浏览会话之间进行跟踪。有一千种方法可以做到这一点 - 网址参数，Cookie，iframe等等。但最简单的可能是URL（或GET）参数，因此我们将重点关注它。

首次加载页面时，我们需要通过创建一个随时间推移而递增的整数值来开始跟踪。然后，在每次连续加载时，我们需要检查当前值是否在范围内，如果是，则递增它并将其传递给下一次迭代。

所以你可以这样做......

<html>
  <head>
    <script type="text/javascript">

      var refreshURL; // Declare this globally so we can access it in the function from refreshPage()

      function refreshPage () {
        window.location.href = refreshURL;
      }

      window.onload = function () { // This construct is equivalent to setting an 'onload=' for the body tag

        // Declare some variables
        var urlBase, urlParams, urlParts, trackerVar, urlBase, queryStr, i, queryParts, paramParts, paramKey, paramVal, j;
        urlParams = {};

        // Parse the URL parameters into an object and get the base URL
        urlParts = window.location.href.split('?');
        urlBase = urlParts[0];
        queryStr = '';
        for (i = 1; i < urlParts.length; i++) {
          if (i > 1) {
            queryStr = queryStr + '?';
          }
          queryStr = queryStr + urlParts[i];
        }
        queryParts = queryStr.split('&');
        for (i = 0; i < queryParts.length; i++) {
          paramParts = queryParts[i].split('=');
          paramKey = paramParts[0];
          paramVal = '';
          for (j = 1; j < paramParts.length; j++) {
            if (j > 1) {
              paramVal = paramVal + '=';
            }
            paramVal = paramVal + paramParts[j];
          }
          urlParams[paramKey] = paramVal;
        }

        if (urlParams['__tracker'] == undefined) {    
          // this is the first load, define the tracker as '1'
          urlParams['__tracker'] = 1;
        } else {
          // this is not the first load, increment the tracker
          urlParams['__tracker'] = parseInt(urlParams['__tracker']) + 1;
        }

        // build the url for the refreshPage function
        refreshURL = urlBase + '?';
        queryStr = '';
        for (i in urlParams) {
          if (i != '' && urlParams.hasOwnProperty(i)) {
            queryStr = queryStr + '&' + i + '=' + urlParams[i];
          }
        }
        refreshURL = refreshURL + queryStr.substr(1);

        if (urlParams['__tracker'] < 6) {
          // If the tracker is less than 6, reload the page in 10 seconds
          setTimeout(refreshPage,2000);
        }

      };

    </script>
  </head>
  <body>
  </body>
</html>

我知道这个答案有点晚了，但我觉得值得写...

Answer 3

考虑使用AJAX动态加载所需信息而不刷新页面，而不是使用window.location.reload()。正如其他人所指出的那样，你可以使用URL参数，但用户可以更好地刷新整个页面。

这是关于使用PHP的AJAX的教程：http://www.tizag.com/ajaxTutorial/ajaxform.php

Answer 4

你可以pass an arbitrary HTML page parameters。这些不会在服务器上处理，而是在客户端上处理。

然后，递增给定参数，或者如果没有给出参数则初始化。通过这种方式，您可以跟踪页面重新加载。

Answer 5

将状态传递为query parameter ^[Wikipedia]或Cookie。

Answer 6

由于您没有指定任何服务器端语言，我建议首先考虑一下解决方案：将整个页面放在一个iframe中，然后在它旁边放置您的JavaScript代码。您也可以将第一个setInterval替换为setTimeout，只有在调用clearInterval之后才会调用该函数。最后，您应该将refresh（）函数替换为：

function refresh ()
{
var if = document.getElementById('iframeid');
if.src = if.src;
}

你的脚本应该是这样的：

<script type="text/javascript">
var t;
var j;
function load()
{
t=setInterval("refresh()", 10000);
j=setTimeout("stop()", 60000);
}

function refresh ()
{
var if = document.getElementById('iframeid');
if.src = if.src;
}

function stop(){
clearInterval(t);
}
</script>

在修复时间后停止javascript自动刷新，例如1分钟

6 个答案: