0

我对 Javascript 很陌生。我正在尝试实现一个按钮来控制页面是否刷新。但是，它不起作用（单击按钮会触发一些动作，如警报等，但不会更改标签按钮并且不会停止刷新页面）。

你能告诉我我哪里出错了吗？这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Message log</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body onload="JavaScript:timedRefresh(5000);">

    <button id="bRefresh" onclick="refreshMode()">Stop refreshing</button>

    some content...

</body>
</html>

<script type="text/JavaScript">
    <!--
        var refresh = 1;

        function timedRefresh(timeoutPeriod) {
            if(refresh == 1) {
                setTimeout("location.reload(true);",timeoutPeriod);
            }       
        }

        function refreshMode() {
            if(refresh == 1) {
                var refresh = 2;
                document.getElementById("bRefresh").value="Start refreshing";
            } else {
                var refresh = 1;
                document.getElementById("bRefresh").value="Stop refreshing";
            }       
        };
    //   -->
</script>
4

4 回答 4

1

您的代码应如下所示，

        var refresh = 1;
        var timedInterval= null;
        function timedRefresh(timeoutPeriod) {
            if(refresh == 1) {
                timedInterval = setInterval(function() { location.reload(true); },timeoutPeriod);
            }       
        }

        function refreshMode() {
            if(refresh === 1) {
                 refresh = 2;
                 clearInterval(timedInterval);
                 document.getElementById("bRefresh").innerHTML="Start refreshing";
            } else {
                 refresh = 1;
                 timedRefresh(5000);
                document.getElementById("bRefresh").innerHTML="Stop refreshing";
            }     
            //document.getElementById("bRefresh").innerHTML="Start refreshing";  
        };

重复任务使用 setInterval 而不是 setTimeout

您声明了三次刷新变量，因此您的按钮值不会改变。

应该使用 innerHTML 而不是 value 来更改 Buttons 文本。

停止使用 clearInterval 如上所述。

于 2013-04-22T09:26:18.250 回答
0 
<button id="bRefresh">Stop refreshing</button>

var button = document.getElementById("bRefresh");
var refresh = 1;
var timeoutPeriod = 5000;
var id;

function timedRefresh() {
    if (refresh == 1) {
        window.location.reload(true);
    }
}

function refreshMode() {
    if (refresh == 1) {
        clearInterval(id);
        refresh = 2;
        button.textContent = "Start refreshing";
    } else {
        id = setInterval(timedRefresh, timeoutPeriod);
        refresh = 1;
        button.textContent = "Stop refreshing";
    }
};

button.addEventListener("click", refreshMode, false);

id = setInterval(timedRefresh, timeoutPeriod);

在jsfiddle上

于 2013-04-22T09:16:24.130 回答
0

使用 innerHTML 来支持 IE < 9

var button = document.getElementById("bRefresh");
var refresh = 1;

function refreshMode() {
    if (refresh == 1) {
        refresh = 2;
        button.innerHTML = "Start refreshing";
    } else {
        vrefresh = 1;
        button.innerHTML = "Stop refreshing";
    }
};

button.addEventListener("click", refreshMode, false);
于 2013-04-22T09:20:48.740 回答
0

在加载正文时，prepareRefresh()函数检查值refresh（设置为 1）并开始刷新页面并超时。您应该启动刷新，并且在刷新之前，您必须检查该refresh值。因为在第一种情况下，location.reload不关心refresh. 检查refresh超时结束时的值

<script type="text/JavaScript">
    <!--
        var refresh = 1;

        function timedRefresh(timeoutPeriod) {
            if(refresh == 1) {
                setTimeout("refreshPage();",timeoutPeriod);
            }       
        }

        function refreshPage ()
        {
          if(refresh == 1) {
                setTimeout("location.reload(true);", 0);
            }  
        }

        function refreshMode() {
            if(refresh == 1) {
                refresh = 2;
                document.getElementById("bRefresh").innerHTML="Start refreshing";
            } else {
                refresh = 1;
                document.getElementById("bRefresh").innerHTML="Stop refreshing";
            }       
        };
    //   -->
</script>
于 2013-04-22T09:28:56.250 回答