CODEWITHSUNDEEP
javascriptjquery
merxie
merxie

Reputation: 95

javascript reload only once

I don't know javascript and I have tried to find an answer on this before posting.

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

See the code in work here: http://jsfiddle.net/7duedzkb/5/

This code reloads a page every 5 seconds. I'd want to modify it to reload a page only once, basically it will reload the page after 5 secs and then stops the reload loop. I need this on a aggregator type of site where at first page opening the feeds are loaded from cache for speed issues.

Can you help? Much appreciated. Thank you

Upvotes: 3

Views: 1473

Answers (5)

Marcos Pérez Gude
Marcos Pérez Gude

Reputation: 22158

You must reload only if a certain condition is true. For example, you can save in sessionStorage a flag and read if exists don't reload.

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
    }
});

It's better session storage instead of localstorage, because the next time user comes to the page the flag will be setted.

EDIT

Solution storing the URL of the page (assuming the URLs are unique):

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
    }
});

Upvotes: 4

Nidhin Prathap
Nidhin Prathap

Reputation: 722

Use SessionStorageto achieve the result, please see the below sample:-

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

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Use localStorage for this purpose,

$(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

Or Use SessionStorage as pointed in the below comments, based on your req :-

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
    }
});

Upvotes: 1

Dmitriy
Dmitriy

Reputation: 3765

$(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
    }
});

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68393

set the flag in a cookie and check it everytime before doing a reload

$(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;
    }

Upvotes: 1

Related Questions