How to make asynchronous event handlers work in a certain order?

Question

Let's say I have a button with an event handler:

<button onclick="btnClicked()"> CLICK ME </button>

and this is the js file:

var num = 0; // global variable

function btnClicked() { 
   num++;
   console.log(num);
}

Let's say that I clicked twice on the same button. I expect to see in console 1 and then 2.

But, it's not necessary that this is what I will get. Each button click invokes the function btnClicked asynchronously, so there is a possible scenario that the second call will end before the first call ends. e.g. The first invocation calls btnClicked, passes the line num++ and then holds (for some reason). Meanwhile, second invocation enters the function that num = 1, increments it to 2, prints 2 in console, and then the first invocation continues its execution with num=2 and therefore also prints 2.

Do you know any way to make sure that second invocation will occur only after first invocation ends ?

`so there is a possible scenario that the second call will end before the first call ends` - erm, not with that code — Jaromanda X, Sep 05 '17 at 06:01
JavaScript has the concept of "running to completion". I.e. code that's currently running cannot be interrupted. https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop *"Each button click invokes the function btnClicked asynchronously"* Clicking on the button will add the handler to the message queue. Only if the JavaScript engine doesn't have anything to do will it process the next message in the queue. — Felix Kling, Sep 05 '17 at 06:03
Not sure I understand the question. The execution cannot be interrupted. — Felix Kling, Sep 05 '17 at 06:08
It's not interrupted. Each execution is a thread that is executed in different pace — CrazySynthax, Sep 05 '17 at 06:12
JavaScript is single threaded (in browsers at least). There can always only be one thing that is executed, and that thing is executed *to completion*. Again, have a look at the link I posted. — Felix Kling, Sep 05 '17 at 06:13

score 1 · Answer 1 · answered Sep 05 '17 at 07:30

After reading the responses I understood that the scenario that I describes (console will print "2" twice) is not possible.

Event handlers are added to event queue. Event Queues are not V8 threads. Therefore, each task in event queue will execute synchronously, i.e. only after the first invocation ends the second one will start.

However, if the function were:

function btnClicked() { 
   num++;
   console.log(num);
   **AJAX call** 
}

then the execution order would be: print: 1 AJAX call sent for first invocation print 2 AJAX call sent for second invocation

and then in this case both AJAX calls take place in different threads and we cannot know for sure which one of them will ends first.

score 0 · Answer 2 · answered Sep 05 '17 at 06:04

0

On the button click, just disable the button and at end of the function enable the button. Can you try this. I think it will work for you.

answered Sep 05 '17 at 06:04

user2446768

11
4

This shouldn't be necessary. The events are processed in series. – Felix Kling Sep 05 '17 at 06:08
@Felix Kling, the events are not asynchronous callbacks ? – CrazySynthax Sep 05 '17 at 06:11
@CrazySynthax: Sure they are. But every asynchronous event is added to the message queue and processed whenever the engine is idle. See the first of my comments to your question and the link I posted there. – Felix Kling Sep 05 '17 at 06:12
@FelixKling, I posted answer to my own question. Do you agree with it? – CrazySynthax Sep 05 '17 at 07:32

score 0 · Answer 3 · answered Sep 05 '17 at 06:22

While it may not address your problem directly, it is recommended to use eventListener instead of onclick.

Also, to make a variable global you would call it without 'var' -- perhaps not exactly something you'd want to do with something generic like 'num', but that would make it global (more on that here).

This would give you something like:

<button id='click-me'> CLICK ME </button>

<script>
    num = 0; // global variable
    document.getElementById('click-me').addEventListener('click', function(){
        // function here
    });
</script>

Alex Nikulin · Answer 4 · 2017-09-05T07:01:59.407

You just need a promise for solving the order issue. Events are going each by each. But if you have an ajax request, and you need to send ajax requests each by each after you got a response from a server. And you send ajax request by a button click (asynchronous execution of functions by certain order, each by each). So here is a working example with fake execution function.

var num = 0;

var executing = new Promise(function(resolve, reject){
     resolve();
});

var btnHandle = function(){
  executing.then(createJobInstanse());
}

var createJobInstanse = function(){
 return function(){
      return new Promise(function(resolve, reject){
        // fake asynchronous operation from 10ms to 2000ms, with random execution time
        window.setTimeout(function(){
          console.log(num++);
          resolve();
        }, Math.floor(Math.random() * 2000) + 10);
      });
 };
}

  

var btn = document.querySelector("#btn");
btn.addEventListener("click",btnHandle);

<button id="btn" onclick="btnHandle">click</button>

How to make asynchronous event handlers work in a certain order?

4 Answers4