Question

我不知道javascript，我在发布之前试图找到答案。

$(function(){
    $('body').fadeIn(1000);
    setTimeout(function(){
        $('body').fadeOut(2000, function(){
            location.reload(true);
        });
    }, 5000); // 5 seconds for demo
});

请参阅此处的代码：http://jsfiddle.net/7duedzkb/5/

此代码每5秒重新加载一页。我想修改它只重新加载一次页面，基本上它会在5秒后重新加载页面，然后停止重新加载循环。我需要在聚合器类型的站点上进行此操作，在第一页打开时，从缓存加载源以进行速度问题。

你能帮忙吗？非常感激。谢谢

Answer 1

只有在某个条件为真时才必须重新加载。例如，您可以在sessionStorage中保存一个标志，并读取是否存在不重新加载。

var store = window.sessionStorage;
$(function(){
    $('body').fadeIn(1000);
    if(!store.getItem("reloaded")) {
       setTimeout(function(){
           $('body').fadeOut(2000, function(){
               store.setItem("reloaded", "true");
               location.reload(true);
           });
       }, 5000); // 5 seconds for demo
    }
});

这是更好的会话存储而不是localstorage，因为下次用户访问该页面时，将设置该标志。

修改

存储页面URL的解决方案（假设URL是唯一的）：

var store = window.sessionStorage;
var page = window.location.href;
$(function(){
    $('body').fadeIn(1000);
    if(!store.getItem("reloaded-"+page)) {
       setTimeout(function(){
           $('body').fadeOut(2000, function(){
               store.setItem("reloaded-"+page, "true");
               location.reload(true);
           });
       }, 5000); // 5 seconds for demo
    }
});

Answer 2

为此目的使用localStorage，

$(function(){
    $('body').fadeIn(1000);
    if(localStorage.getItem("reloaded") !== "true") {
    //Check the flag in localStorage before begin the reload.
      setTimeout(function(){
        $('body').fadeOut(2000, function(){
            localStorage.setItem("reloaded","true");
            //set a flag during the first reload in localStorage
            location.reload(true);
        });
      }, 5000); // 5 seconds for demo
    }
});

DEMO

或根据您的要求使用SessionStorage，如下所示： -

var storage = window.sessionStorage;
$(function(){
    $('body').fadeIn(1000);
    if(!storage.getItem("reloaded")) {
    setTimeout(function(){
        $('body').fadeOut(2000, function(){
            location.reload(true);
            storage.setItem("reloaded", "true");
        });
    }, 5000); // 5 seconds for demo
    }
});

Answer 3

在cookie中设置标志并在每次重新加载之前检查它

$(function(){
    $('body').fadeIn(1000);
    setTimeout(function(){
        $('body').fadeOut(2000, function(){
            if ( getCookie("reload") != "true" )
            {
               setCookie("reload", "true"); 
               location.reload(true);
            }
        });
    }, 5000); // 5 seconds for demo
});

    function setCookie(key, value) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
        document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
    }

    function getCookie(key) {
        var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
        return keyValue ? keyValue[2] : null;
    }

Answer 4

$(function(){
    $('body').fadeIn(1000);
    if (localStorage.reloaded !== 'true') {
        setTimeout(function(){
            $('body').fadeOut(2000, function(){
                localStorage.reloaded = 'true';
                location.reload(true);
            });
        }, 5000); // 5 seconds for demo
    }
});

Answer 5

使用SessionStorage来实现结果，请参阅以下示例： -

var storage = window.sessionStorage;
$(function(){
    $('body').fadeIn(1000);
    if(!storage.getItem("reloaded")) {
    setTimeout(function(){
        $('body').fadeOut(2000, function(){
            location.reload(true);
            storage.setItem("reloaded", "true");
        });
    }, 5000); // 5 seconds for demo
    }
});

Sample

javascript只重新加载一次

5 个答案:

修改

DEMO