How to execute a function on conditional if-else statement?

Question

I have a function myFn() that needs to be executed when some specific condition are true in if-else block like below:

if (title === "titleOne") {self.loadingBarOne = true };
if (title === "titleTwo") { self.loadingBarTwo = true };

var myFn = (//this contains the function logic to download a file)

self.loadingBarOne = false;
self.loadingBarTwo = false;

The loadingBars are displayed in the UI after the user clicks download. How do I set the value of loadingBarOne and loadingBarTwo to true for the time myFn() is running, i.e. the file is being downloaded and then set it to false after it is downloaded?

If in case user clicks both download at the same time,the myFn() function should run for both and should be set to false after the respective files are downloaded.

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Keith, Apr 16 '19 at 15:50
Can you access your `title` variable in your `myFn` function? — junvar, Apr 16 '19 at 15:51
Then could you move your conditions to `myFn`? e.g. `var myFn = () => {if (title === 'titleOne') downloadOne();}` — junvar, Apr 16 '19 at 15:55
Is it possible to do it without making any changes to myFn() ? — azrael v, Apr 16 '19 at 16:00
@Ashish Verma maybe, we would need to know the parameters and return type of myFn() — Wilhelmina Lohan, Apr 16 '19 at 16:02

score 5 · Accepted Answer · answered Apr 16 '19 at 15:53

I would approach this by using your myFn() as a callback function. You could improve this example by saving the loading bar to a local variable refactoring out the actual call to myFn() so it occurs only once and uses the local variable.

var myFn = function (filename, callback) {
    // do your file downloading
    console.log('Downloading ', filename);
    callback();
};

if (title === "titleOne") {
    self.loadingBarOne = true;
    myFn('abc.html', function(resp){
        self.loadingBarOne = false;
    });    
} else if (title === "titleTwo") { 
    self.loadingBarTwo = true;
    myFn('abc.html', function(resp){
        self.loadingBarTwo = false;
    });
}

Is it possible to do it without making any changes to myFn() ? — azrael v, Apr 16 '19 at 15:59
Unless `myFn()` takes a callback or returns something you can listen to like a `Promise`, `Observable` or event emitter then there is no way to know when its done. — Wilhelmina Lohan, Apr 16 '19 at 16:06

score 1 · Answer 2 · answered Apr 16 '19 at 16:11

You can use javascript Promises.

var myFn= async (//this contains the function logic to download a file)
new Promise((resolve,reject)=>{
    self.loadingBarOne = true 
    self.loadingBarTwo = true
    resolve()
})
.then(()=>{
    return myFn()
})
.then(()=>{
    self.loadingBarOne = false 
    self.loadingBarTwo = false
})

Wilhelmina Lohan · Answer 3 · 2019-05-08T15:11:07.757

You could use a callback:

function myFn(callback) {
  //this contains the function logic to download a file
  callback();
}

if (title === "titleOne") {
  self.loadingBarOne = true;
  myFn(() => self.loadingBarOne = false);
}
if (title === "titleTwo") {
  self.loadingBarTwo = true;
  myFn(() => self.loadingBarTwo = false);
}

even better

function myFn() {
  return new Promise(resolve => {
    //this contains the function logic to download a file
    resolve();
  });
}

if (title === "titleOne") {
  self.loadingBarOne = true;
  myFn().then(() => self.loadingBarOne = false);
}
if (title === "titleTwo") {
  self.loadingBarTwo = true;
  myFn().then(() => self.loadingBarTwo = false);
}

@user212514 beat me to it – Wilhelmina Lohan Apr 16 '19 at 15:54 — Wilhelmina Lohan, Apr 16 '19 at 15:54

Jabberwocky · Answer 4 · 2019-04-16T16:00:12.643

I think what you need is this:

let self.loadingBarOne = false;
let self.loadingBarTwo = false;

let myFn = () => {
    if(title === "titleOne") {
        self.loadingBarOne = true; //this will set the global variable 
        //that we declared before to true
       }
    else if (title === "titleTwo") {
        self.loadingBarTwo = true;
    }

    //logic to download here

    //once that is done set global variable to false
    self.loadingBarOne = false;
    self.loadingBarTwo = false;

   }

You can also do the same with a promise. Promise for the variable to stay true and after you finish downloading, resolve and set to false.

Have in mind that generally speaking global variables aren't best practice, but I'm assuming you know what to do and not do. If you also change the scope of the vairables to not being global, then you can still do the same thing with the logic I have there.

@AshishVerma i edited it with the simplest thing I could think of. I'm just assuming you don't have a more complicated problem than the one you present. The other answers with the callbacks are very good by the way. — Jabberwocky, Apr 16 '19 at 16:00

score -3 · Answer 5 · answered Apr 16 '19 at 15:48

-3

use global variables.

in your function check global vars

answered Apr 16 '19 at 15:48

Zivan Stojan

1

6

global variables are not best practice and you didnt provide a solution to the asked question – Tiisetso Tjabane Apr 16 '19 at 15:50

How to execute a function on conditional if-else statement?

5 Answers5