Wait for JavaScript function to finish before proceed

Question

This might not be a complicated question but I'm not sure if I'm on the right track here.

My goal is to run a JavaScript function first and when the execution is completely finished (this may take up to a few seconds, but not always) close the window.

The function and closing is triggered by just 1 button:

<button id="myID">Click me</button>

The JavaScript is:

<script type="text/javascript">
    function someFunction() {
        // do some stuff
    }

    document.getElementById('myID').addEventListener("click", function(){
        someFunction();
        window.close();
    });
</script>

This works fine, but can get anyone give some advice if this is a reliable method or not? It is important that execution of the function is fully completed before window.close() is triggered.

I presume you're not actually doing an alert in that function? But rather some kind of [async] I/O (ajax request or whatnot)? — Sergio Tulentsev
– Sergio Tulentsev, Commented Sep 23, 2018 at 19:44
Unless someFunction has code expecting asynchronous results, such as an ajax request, and you want those completed before closing the window, then yes, the rest of the code is guaranteed to execute after it. — Jeto
– Jeto, Commented Sep 23, 2018 at 19:45
OP if you explain what the function actually does it will a) save everyone guessing and b) you'll get a better answer. — Andy
– Andy, Commented Sep 23, 2018 at 19:52
@Andy someFunction() does some DOM manipulation after a page has loaded. The execution time really depends on the browser, cpu speed etc. There is no AJAX involved here. — elton73
– elton73, Commented Sep 23, 2018 at 20:12
@elton73 In that case, you need to ask yourself, if you are doing anything asynchronous, or not. DOM manipulation is synchronous. — vicbyte
– vicbyte, Commented Sep 23, 2018 at 20:14

Jonathan Gagne · Accepted Answer · 2018-09-23 20:26:53Z

4

You can put your window.close() right under your alert();. However, if you would like to add more asynch stuff, you want a callback function like this.

<script type="text/javascript">
    var closeWindow = function() {
        window.close();
    };

    function someFunction(callback) {
        alert('hi');
        callback();
    }

    document.getElementById('myID').addEventListener("click", function(){
        someFunction(closeWindow);
    });
</script>

edited Sep 23, 2018 at 20:26

answered Sep 23, 2018 at 19:46

Jonathan Gagne

4,4095 gold badges20 silver badges31 bronze badges

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

6 Comments

vicbyte Over a year ago

Why would he need a callback if he does synchronous stuff only?

Jonathan Gagne Over a year ago

Is it not safer to use a callback function in case he wants to add asynch stuffs?

Jonas Wilms Over a year ago

No, the OP does not need a callback here.

t.niese Over a year ago

As a note: instead of var closeWindow = function() {} you should write function closeWindow() {} there is no need or benefit of using an assignment expression here. Using an expression indicates that the closeWindow variable might have a different function assigned at later point or different place.

Jonathan Gagne Over a year ago

True, however, I almost put ()=>{} as well as I like to make them learn similitude in coding.

|

vicbyte · Accepted Answer · 2018-09-23 20:12:08Z

2

Synchronous javascript will always be run in the top-down order and will always guarantee that instruction one will be finished before instruction two.

But, there is also an asynchronous part (you don't have it here, but for example ajax requests are often asynchronous), that is executed differently and requires callbacks/promises.

edited Sep 23, 2018 at 20:12

answered Sep 23, 2018 at 19:44

vicbyte

3,7901 gold badge14 silver badges21 bronze badges

Comments

Alexander Dimitrov · Accepted Answer · 2018-09-23 19:53:11Z

0

Your options are:

put window.close(); in the callback function
use promises this way you can control if the callback execution /if there is an error you can handle it better and not close the window/

answered Sep 23, 2018 at 19:53

Alexander Dimitrov

9741 gold badge6 silver badges17 bronze badges

Comments

Jonas Wilms · Accepted Answer · 2018-09-23 20:17:53Z

0

someFunction() does some DOM manipulation after a page has loaded

Thats synchronous (the browser might defer the rendering, but were talking about milliseconds here), and therefore it is guaranteed that the DOM manipulation is done before the function returns.

answered Sep 23, 2018 at 20:17

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Collectives™ on Stack Overflow

Wait for JavaScript function to finish before proceed

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related