js only - run a function only once

Question

I'm fetching some data from firebase and would like to run async/await function (to fetch data) only once upon the first page load. I'm used to React and lifecycle methods / hooks doing it but this little project is just too small to use React. I just need to run this function once, fetch the data, save it to a variable and do not make any further calls to firebase api in the same session.

async function getEntries() {
  const snapshot = await firebase.firestore().collection('riders').get()
  // Do my thing with the data, etc.
  // console.log(snapshot.docs.map(doc => doc.data()));
}

Is there any js-only way of running this function only once when the page loads?

Well define a function and call it , it will be called once only.Until you refress the page.Perhaps use the something like this `(function () { ... })();` — Ankush Verma, Jan 02 '21 at 13:58

score 1 · Answer 1 · answered Jan 02 '21 at 14:00

Yes. You can use Self Invoking (self executing) Functions. Syntax is like:

(function(){})();

The last parentheses are for running function. the function is anonymous.

You can Implement it this way:

(async function () {
    const snapshot = await firebase.firestore().collection('riders').get()
})();

in this way you can never call this function again and it will run only once.

Tutorial: https://blog.mgechev.com/2012/08/29/self-invoking-functions-in-javascript-or-immediately-invoked-function-expression/

And The question you asked is somehow duplicate and answered here: Function in JavaScript that can be called only once

Jonas Wilms · Accepted Answer · 2021-01-02T14:14:54.850

If you call a function just once, why do you need the function at all?

const snapshot = await firebase.firestore().collection('riders').get()
// Do my thing with the data, etc.
// console.log(snapshot.docs.map(doc => doc.data()));

This top level await only works in modules, and it blocks all depending modules to load. If that is not necessary (they don't depend on the data), or if you don't want write a module, you can wrap the code in an async IIFE, and store the returned promise in a variable:

 const dataPromise =  (async function() {
   //...
   return data;
 })();

While the data is loading, you might want to show some loading icon or so. That can easily be done with the following hook:

 function usePromise(p) {
   const [state, setState] = useState(null);
   useEffect(() => { p.then(setState); }, []);
   return state;
 }

// Inside a component:
const data = usePromise(dataPromise);
if(data === null)
  return <Loading />;

// show data

Ahmet Sönmez · Answer 3 · 2021-01-02T14:40:26.073

1

I think you can load it with the load method when the page is first loaded and then set it to cookie or local stroge. You can check this value on next page loads. You can do this quickly using jQuery.

$(window).load(function() {

     var item = localStorage.getItem('test');
     if(item != null){
      // your code
     }
     else {
      localStorage.setItem('test', 1);
     }         
});

edited Jan 02 '21 at 14:40

answered Jan 02 '21 at 14:20

Ahmet Sönmez

96
5

You should state that this answer uses jQuery. – Jonas Wilms Jan 02 '21 at 14:37
OK. yes I added the way you said. – Ahmet Sönmez Jan 02 '21 at 14:42
But do we have to specify which language each code we write is? This warning doesn't make much sense @JonasWilms – Ahmet Sönmez Jan 02 '21 at 14:56
it does. The question is tagged [javascript] so answers have to be in JavaScript. The question does not state that jQuery is used. – Jonas Wilms Jan 02 '21 at 14:58
1

I understood properly now. I will definitely pay attention to this in my next answers. thanks @JonasWilms – Ahmet Sönmez Jan 02 '21 at 15:05

score 1 · Answer 4 · answered Jan 02 '21 at 14:38

What you are looking for is memoization of the function result. There are several libraries to supporting including react.

Theres also a handmade pattern you can use by changing the function implementation after it's called once, accoring to JavaScript: The Good Parts

async function getEntries() {
  const snapshot = await firebase.firestore().collection('riders').get()
  // Do my thing with the data, etc.
  // console.log(snapshot.docs.map(doc => doc.data()));
  
  getEntries = async function(){
     return snapshot
  }

  return snapshot
}

score 1 · Answer 5 · answered Jan 03 '21 at 02:32

The simplest way is to make a global variable like:

let isCalled = false;

and in the function body do:

if(isCalled) return;
//the stuff the function would do
isCalled = true;
//Assign isCalled to true before using a return statement as it will make the program discard the lines below it.

js only - run a function only once

5 Answers5

You can Implement it this way: