How to set a variable depending on the event handler in the same function with jQuery?

Question

I'm struggling with something that might be simple for some experimented jQuery devs.

I'd like to pass a variable through two event handlers and get the final value outside the events.

function myfunction(){

 var val = "";

 $(document).on('keyup',function(e) {
   if(e.which == 13) {
     val = "keyup";
     console.log(val);  
   }
 });

 $('#list li').click(function() {
   val = "click"
   console.log(val); 
 });

 console.log('final val =' + val);

}


$(document).ready(function(){
 myfunction();
});

So basically, I should get two messages in the console with the same "val" !

Any idea on how to make it work ?

If any information is missing, please let me know in the comment section !

Does this answer your question? [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Ivar, Apr 15 '21 at 14:00
The `console.log()` outside of the listeners runs before the events occur. That last log will always evaluate to `'final val ='`. — Rojo, Apr 15 '21 at 14:00

score 1 · Answer 1 · answered Apr 15 '21 at 14:15

Callbacks

You seem to not understand how callbacks work. Let me explain. You have two events, one for keyup on document and the other on clicks on li elements. These receive some functions as parameters. At the point when your code runs, the functions you passed to the event handlers are only defined, but not executed, which is perfectly logical, because at that point no event occurs that would trigger them. The callbacks are therefore defined behaviors that are triggered when something happens.

So, the thing you misunderstand is that you mix up the definition of the event handlers with their execution. At the point of their definition they are not executed, however, just after their definition console.log is being called for a variable which was not initialized yet due to lack of event triggering its initialization.

A callback is a function that your event calls "back" when it occurs.

For example if you call someone to ask him/her to come to you for a visit, it does not make sense to actively wait for them outside your door. It makes much more sense to agree when he arrives, he would call you back when his arrival, as an event happened. The behavior is very similar on a functional level in terms of callbacks

What happens after what:

 $(document).on('keyup',function(e) { //when keyup on document, much later than the call of myFunction happened
   if(e.which == 13) {
     val = "keyup";
     console.log(val);  
   }
 });

 $('#list li').click(function() { //when clicking on li, much later than the call of myFunction happened
   val = "click"
   console.log(val); 
 });

 console.log('final val =' + val); //At the call of myFunction at page load

Final value

Since a keyup on document and a click on the li elements can happen any time, talking about a final value for val does not make much sense. Since keyup and click are very rarely happen at the exact same time, determining a final value for val at a given moment seems to be handling an edge-case. If that's what you want, then you can use a semaphore behavior.

How to set a variable depending on the event handler in the same function with jQuery?

1 Answers1

Callbacks

What happens after what:

Final value