为什么我的代码在文本字段中给出的时间没有重新加载

Question

window.onload = function() {
        onPageLoad();
}
var reftime;
function refreshPage(){
        var refreshtime = document.getElementById("r_time").value;
        //var reftime;
        reftime = setInterval(function() {
                window.location.reload(true);
        }, refreshtime*60000);
}

以上代码是用于重新加载页面的Js。

<input id='r_time' type='text' name='r_time' value= ''/>
           
<input id='r_btn' type='button' value='Apply' style="font-size:12px;font-family:Helvetica;" onclick='refreshPage();'/>

这是我的代码，用于重新加载我的页面，当我以分钟为单位给出时间间隔时，它会重新加载一次。但是一旦重新加载，它就不会再次重新加载。

Answer 1

问题是在使用 window.location.reload(true) 重新加载窗口后，所有 javascipt 变量和间隔都消失了。 因此，只要您第一次重新加载页面，就不会运行会再次重新加载页面的间隔。

要解决此问题，您有几种可能性：

1. 不要重新加载整个页面。只需重新加载部分更改的页面。 这可以通过异步 AJAX 调用从服务器检索要显示的内容来完成
2. 查看this solution 了解如何在重新加载 html 页面后保留变量。 重新加载后，您可以在 window.onload 函数中检查是否应该在指定时间后开始另一个 inverval。

Answer 2

例如，如果您希望页面在 1 分钟后自行重新加载，您可以尝试在您的 onPageLoad() 函数中编写 location.reload(0)，如下所示：

window.onload = function() {
  setTimeout(onPageLoad, 60000);
}

function onPageLoad() { 
   location.reload(0);
}

这应该会让您的页面在 1 分钟后重新加载（示例）。

Answer 3

刷新后，您将重新开始，变量设置的值将消失。您可以使用localStorage 保存该值。另外，在这种情况下使用 setInterval 是不必要的，你必须使用 setTimeout

var reftime;
var input = document.getElementById("r_time");

window.onload = function() {
    reftime = localStorage.getItem('time');
    
  if (reftime) {
    input.value = reftime;
    refreshPage();
  }
}

function refreshPage(){
        var time = input.value || reftime;
  
  localStorage.setItem('time', time);
        setTimeout(function() {
                window.location.reload(true);
        }, time);
}

Answer 4

window.onload = function () {
    onPageLoad();
}
var reftime;

function refreshPage() {
    var refreshtime = document.getElementById("r_time").value;
    // var reftime;
    reftime = setInterval(function () {
        location.reload(true);
    }, refreshtime * 60000);
}

看看这是否有效。

Answer 5

对于这段代码，我使用 cookie 来保存每次网站刷新时的值。

const _ = {
    cookie_class: class cookies {
        constructor() {

        }
        setCookie(cookie_name, cookie_value, expire_in_days) {
            var d = new Date();
            d.setTime(d.getTime() + (expire_in_days * 24 * 60 * 60 * 1000));
            var expires = "expires=" + d.toUTCString();
            document.cookie = cookie_name + "=" + cookie_value + ";" + expires + ";path=/";
        }

        getCookie(cookie_name) {
            var name = cookie_name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }
            return "";
        }
        exists(cookie) {
            var user = this.getCookie(cookie);
            if (user != "") {
                return true;
            } else {
                return false;
            }
        }
    }
}
const cookies = new _.cookie_class();
let interval;
const refresh = () => {
    location.reload();
}
let cookie_name = "refresh_interval";
window.onload = () => {
    if (cookies.exists(cookie_name)) {
        interval = setInterval(refresh, parseInt(cookies.getCookie(cookie_name)));
    }
}

const update = () => {
    let value = document.getElementById('input').value;
    if (!isNaN(parseInt(value))) {
        cookies.setCookie(cookie_name, parseInt(value), 365);
        clearInterval(interval);
        interval = setInterval(refresh, parseInt(value));
    } else {
        // Handle is however you would Like:
        // The input is not a Number
    }
};

// Listeners

document.getElementById('apply-btn').addEventListener('click', (event) => {
    event.preventDefault();
    update();
});

告诉我它是否适合你！