How can I do a javascript that only runs once

Question

I have this jquery code:

$(document).ready(function(){
  $(".body").hide();

  setTimeout(function() {
    $(".body").show()
  }, 2000);

  setTimeout(function() {
    $(".img").fadeOut(1000)
  }, 1000);
});

And I'd like it so that it will only work when the page is first clicked on. So when you reload the page or navigate through the site and navigate back to it the script above won't execute.

Set a cookie or localstorage value on the first page load, and check if it is set. If it is, do the animation, otherwise don't — Antony, Jan 22 '18 at 16:37
So do you want everything inside the function passed to `$(document).ready`, from `$(".body").hide()` through the second setTimeout, to execute only once? — Dexygen, Jan 22 '18 at 16:40
@GeorgeJempty how else will you persist the data between page reloads without browser storage or session management of some sort? — Michael Curry, Jan 22 '18 at 16:42
As Antony said you need to save a value inside a browser using localstorage , cookie or even a session and i recommend using a [web storage](https://www.w3schools.com/html/html5_webstorage.asp) — Neji Soltani, Jan 22 '18 at 16:43

Reinstate Monica Cellio · Answer 1 · 2018-01-22T17:29:56.503

You can use localStorage to store values at the browser level, so next time a user visits your site they will get the same data. If you set a flag when they visit your site then you can tell the first time they visit, due to that flag not being set.

Here's that change added to your code, with corresponding comments...

$(document).ready(function(){

    // check localStorage to see if we've run this before.  If we have then do nothing
    if (!localStorage.getItem("first-run")) {

        // set a flag in localStorage so we know we've run this before.
        localStorage.setItem("first-run", true);

        $(".body").hide();

        setTimeout(function() {
            $(".body").show()
        }, 2000);

        setTimeout(function() {
            $(".img").fadeOut(1000)
        }, 1000);
    }
});

Do not try to delete my answer. Comment and explain why you believe it's wrong, or leave it at anonymous with the down-vote. — Reinstate Monica Cellio, Jan 22 '18 at 16:43

score 2 · Answer 2 · answered Jan 22 '18 at 16:41

2

Try something like this.

$(document).ready(function() {
    if(!localStorage.visited) {
        //do first page load stuff
        ...
        localStorage.visited = true;
    }
});

answered Jan 22 '18 at 16:41

Michael Curry

991
8
20

Thank you, everyone, for all the help I managed to do what I was trying to do. Have a nice future. – Sparf Jan 22 '18 at 17:05

Herohtar · Answer 3 · 2018-01-22T17:00:25.530

There are already solutions here using localStorage; however, a value set in localStorage will remain until the user clears their browser data. This means that your code will never run again unless you specifically do extra work to check how long it has been set, etc.

If you would like it to run again when they visit the page later you should use sessionStorage:

...data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.

This will allow the code to run on a new visit to the page, but reloading or navigating away/back will not trigger it because the sessionStorage is still set. However, if they close the tab/window and come back to it later, the code will run again.

$(document).ready(function() {
    if(!sessionStorage.visited) {
        sessionStorage.visited = true;
        ...
        //other code
    }
});

How can I do a javascript that only runs once

3 Answers3