Execute js function once onClick

Question

When a searchbox is submitted, I execute 2 API functions.

document.getElementById('getWeather').onclick = function(){
  // init data stream
  getAPIdata();
  getAPIWeerdata();
};

The first one getAPIdata(); is for the searchbox itself and of course the value can change when the user submits again. So this can get executed more than once.

The second one on the other hand getAPIWeerdata(); gets executed once when the user submits the searchbox.

Can I create something like getAPIWeerdata();.ExecuteOnce

or check this answers over here: https://stackoverflow.com/questions/12713564/function-in-javascript-that-can-be-called-only-once — Mihai Crăiță, Apr 14 '20 at 23:41

score 2 · Accepted Answer · answered Apr 14 '20 at 23:45

2

One solution would be to use a boolean that is set to false when you call that onclick function, and call getAPIWeerdata() only if that bool is true. Make sure to call getAPIWeerdata() before you set your bool to false.

So :

var boolean = true;

document.getElementById('getWeather').onclick = function(){
// init data stream
getAPIdata(); 
if (boolean) {
getAPIWeerdata();
}
boolean = false;
};

answered Apr 14 '20 at 23:45

stacks

349
2
5
13

Yes I realised this as soon as I posted this question, thanks anyway! – Blank Apr 14 '20 at 23:46

score 0 · Answer 2 · answered Apr 14 '20 at 23:47

Set a data- attribute on the respective dom element:

document.getElementById('getWeather').onclick = function(){
    // init data stream
    getAPIdata();
    if (!document.getElementById('getWeather').hasAttribute('data-inited')) {
        getAPIWeerdata();
        document.getElementById('getWeather').setAttribute('data-inited', 1'); // Value does not matter
    }
}

Execute js function once onClick

2 Answers2