javascript - 使用 ajax/javascript 和 setTimeout 重新加载页面 2 次

Question

说实话，我必须承认我不擅长 Ajax、Java 脚本或 CSS。请对我宽容一些，我需要帮助。我正在使用封装在 Jquery mobile 中的 CMS，并且无法使用元刷新方法。如何使用下面的代码使页面在指定时间仅重新加载 2 次。

<script type="text/javascript">

$(document).ready(function(){
setTimeout(function(){
    window.location.reload();
}, 2000);
});

$(document).ready(function(){
setTimeout(function(){
    window.location.reload();
}, 15000);
});
</script>

我遇到的问题是它忽略了第二个并继续循环。我知道有一个简单的解决方案。

Answer 1

您需要坚持不懈才能克服循环问题。这是因为每次重新加载页面时，都会评估其中的 javascript。您的页面应该“记住”它已被重新加载。 ...如何？有很多方法。您可以向查询字符串添加参数，或者将此数据保存在 cookie 或本地存储中。您可以跟踪服务器端的重新加载。每种方法都有其优点和缺点。

这是一个简单的工作解决方案，接近您正在寻找的解决方案，它使用 localStorage (旧浏览器不支持 localStorage http://caniuse.com/#feat=namevalue-storage )

<script type="text/javascript">
    ;(function () {
        var reloads = [2000, 13000],
            storageKey = 'reloadIndex',
            reloadIndex = parseInt(localStorage.getItem(storageKey), 10) || 0;

        if (reloadIndex >= reloads.length || isNaN(reloadIndex)) {
            localStorage.removeItem(storageKey);
            return;
        }

        setTimeout(function(){
            window.location.reload();
        }, reloads[reloadIndex]);

        localStorage.setItem(storageKey, parseInt(reloadIndex, 10) + 1);
    }());
</script>

如您所见，我使用了一个包含某种时间线的数组。为了简单起见，数组的每个元素都包含自上次重新加载以来更改页面之前要等待的毫秒数。