Wait for an external JS function before continuing the same method

Question

I have a simple JS function defined like this :

function firstFunction() {
    $.ajax({
        url: "/path/to/my/endpoint",
        type: "GET"
    }).done(function (data) {
        localStorage.setItem("myItem", data);
    });
}

Later on, I have another function defined like this :

function mySecondFunction() {
    if(localStorage.getItem("myItem") == null) {
        // Here I want to call firstFunction() and stop everything until it finishes
    }

    //Immediately use localStorage.getItem("myItem") for other purposes
    //no matter I entered the if() or not
}

With a simple async: false in $.ajax, it works, but I've seen it's going to be deprecated and I want to avoid this solution.

Could you please suggest how to wait for mySecondFunction when entering my if() ?

I tried with $.when() but without success, maybe I did somehting wrong ?

I tried something like

   function mySecondFunction() {
      var deferred = $.Deferred();

      if(localStorage.getItem("myItem") == null) {
           $.when(firstFunction()).then(function () {
                    deferred.resolve();
                })
      }
      else {
         deferred.resolve();
      }

      //other instructions
    }

But other instructions are called BEFORE the end of firstFunction()

You don't "wait". You can put the functionality in a callback or use Promises. — Pointy
– Pointy, Commented May 19, 2022 at 17:29
@DerekLawrence I tried using $.Deferred();, then resolve it afer the call to firstFunction() but it doesn't wait ; maybe I did something wrong ? — user2687153
– user2687153, Commented May 19, 2022 at 17:35
@Pointy you're right, but please take a look to my edit, it's what I tried but it looks incorrect (at least as I wrote it) — user2687153
– user2687153, Commented May 19, 2022 at 17:39
Does this answer your question? Proper way to wait for one function to finish before continuing? — Heretic Monkey
– Heretic Monkey, Commented May 19, 2022 at 17:44

kalkronline · Accepted Answer · 2022-05-19 18:05:52Z

2

Make firstFunction() return a promise.

function firstFunction() {
    return new Promise((res, err) => {
        $.ajax({
            url: "/path/to/my/endpoint",
            type: "GET"
        }).done(function (data) {
            localStorage.setItem("myItem", data);
            res()
        });
    });
}

Make mySecondFunction aysnc.

async function mySecondFunction() {
    if(localStorage.getItem("myItem") == null) {
        await firstFunction();
    }

    localStorage.getItem("myItem")
    ...
}

This is how I would recommend you do this, since the ajax request wont block execution of other code, like button callbacks. Async/await and promises are hard to grasp at first, so here's some reading on how they work behind the scenes.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

edited May 19, 2022 at 18:05

answered May 19, 2022 at 18:00

kalkronline

7645 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Derek Lawrence Over a year ago

YOu can allso do firstFuction,then( () => { secondFunction(); } ); calls.then when the promise is resolved.

Tyler2P · Accepted Answer · 2022-05-19 18:40:11Z

0

Just change your if clauses with a while loop and call your firstFunction in that loop.

Example:

function mySecondFunction() {
    while(localStorage.getItem("myItem") == null) {
        firstFunction()
    }
}

edited May 19, 2022 at 18:40

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered May 19, 2022 at 17:53

SurpriseMF

2123 silver badges13 bronze badges

Collectives™ on Stack Overflow

Wait for an external JS function before continuing the same method

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related