Home Async Callback - Placing the Call Back Function
Reply: 3

Async Callback - Placing the Call Back Function

Theodore Steiner
1#
Theodore Steiner Published in 2018-01-11 03:56:35Z

New to Js and trying to work out Async-callbacks in a non-server based setting. As an example I've created two functions, the first of which calls the second. The first function is triggered by an onclick event, which starts a 1 second timer, and then an alert shows.

What I am trying to have happen is after that alert, another 3 seconds passes and the second alert function should fire. However, I am unsure of how to call the second function correctly.

Below is my code. Any help would be appreciated

Code:

$(document).ready(function(){
	
	var square = $('.square');
	
	square.on('click', function(callbackFunction) {
		setTimeout(function() {
			alert('Thanks for waiting');
		}, 1000);
		
		callbackFunction(); //end of callback function
	});//end of square click
	
	function callbackFunction() {
		setTimeout(function() {
			alert('thanks for waiting even longer')
		}, 3000);
	};
	
	
});//end of doc
.square {
	height: 50px;
	width: 50px;
	border: 1px solid;
	position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>

Racil Hilan
2#
Racil Hilan Reply to 2018-01-11 05:06:17Z

You cannot control the signature of the callback function of the event listener, so you cannot pass it a function. It is always passed a copy of the event itself, so we usually write it like this:

square.on('click', function(event) {

});

Some people use e instead of event, doesn't really matter the name, but it is always a copy of the event.

When you call a function, your calling code will stop there, execute the function, get the returned value (if any), and then continue. But when you call an async function, your code will call the function and continue without waiting for it to finish. Since your code didn't wait for the function, it cannot get its returned value or any indication that it is done. To get that, we use a callback function, which is called by the async function when it completes its job. It's like saying, do your job and call me back when done.

Back to the click event above, the second argument accepts a function as a callback function. It's like saying: when the event occurs (somebody clicks on the element), call this callback function. We can pass it an anonymous function (a function with no name), like in the example above, or we pass it the name of a function like this:

square.on('click', callbackFunction);

Notice that we only pass the name, no parenthesis. Because we're not executing the function, we're just telling the event listener the name of the function that it needs to call when the event happens.

Here is the full code fixed. I renamed your functions to be clearer. The second function is not a callback function and we call it directly:

$(document).ready(function() {
  $('.square').on('click', callbackFunction);

  function callbackFunction() {
    setTimeout(function() {
      alert('Thanks for waiting');
      secondFunction(); //calling the second function
    }, 1000);

  }

  function secondFunction() {
    setTimeout(function() {
      alert('thanks for waiting even longer')
    }, 3000);
  }
});
.square {
  height: 50px;
  width: 50px;
  border: 1px solid;
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>

dhilt
3#
dhilt Reply to 2018-01-11 04:04:21Z

If you want to pass your callback to your click handler, then I would do it as following:

function clickHandler(callbackFunction) {
    setTimeout(function() {
        alert('Thanks for waiting');
        callbackFunction();
    }, 1000);
}

function callbackFunction() {
    setTimeout(function() {
        alert('thanks for waiting even longer')
    }, 3000);
};

square.on('click', function()  {
    clickHandler(callbackFunction);
});

If you need just to show 2 alert after 1 one, then no param is needed:

function clickHandler() {
    setTimeout(function() {
        alert('Thanks for waiting');
        callbackFunction();
    }, 1000);
}

function callbackFunction() {
    setTimeout(function() {
        alert('thanks for waiting even longer')
    }, 3000);
};

square.on('click', clickHandler);
Faust
4#
Faust Reply to 2018-01-12 06:40:35Z

The issue with the way you set that up is here:

 square.on('click', function(callbackFunction) { ... 

...you're passing an anonymous function as the 2nd param of jquery's .on . Since this param is a valid function, jQuery calls it, passing an events object (representing details around the user's click action) in as the first parameter, which you have mis-named as "callbackFunction". The events object is not, itself, a function, so when you attempt to execute it like a function two lines later:

 callbackFunction();

it errors.

You didn't specify any browser requirements in your question, and since dhilt answered with more traditional js (+1), I thought I'd show how to solve this with more modern js syntax (using es6 arrow functions):

$(document).ready(function(){  
     $('.square').on('click', () => setTimeout(() => {
         alert('thanks for waiting');
         setTimeout( () => alert('thanks for waiting even longer'), 3000 );
     }, 1000));
});
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.306842 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO