I have a javascript callback function setup like this
function myFunction(callback){
$('meta[name="viewport"]').prop('content', 'width=1440');
//other code
callback()
}
function otherFunction(){
//some async operation
}
myFunction(otherFunction)
Does this code ensure that my otherFunction does not run before the viewport is changed and other code above it is implemented?
If all the code above the callback call is synchronous, then yes, otherFunction will run after all the code above.
Asynchronous callback functions will always run after all synchronous code has been completed. This is because JS has something called the event loop which looks the following way:
Whenever we do asynchronous operation often this is associated with a Web API. This web API is abstracted away from us. We don't need to know how the browser implements this feature (which probably is written in C++ as part of the browser). However, we are interested in the value of operation or eventual return value.
So what the browser does is whenever the webAPI's are finished the callback associated with it is pushed in the callback queue. Then whenever the stack is empty the event loop will push an function on the stack.
This is why asynchronous operations will always be performed last, because the event loop will wait for the stack to be empty before pushing an item on it.
Here is best way to look into it. Here i have added a statement just before the callBack function . You can see the console log even after otherfunction execution. So it entirely depends upon whether you are using synchronous or asynchronous code before the function invocation.
function myFunction(callback){
$('#ipt').val(callback.name);
//other code
setTimeout(function(){console.log('hello')},5000)
callback()
}
function otherFunction(){
alert( $('#ipt').val());
}
myFunction(otherFunction)<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="ipt" placeholder="Dummy text"/>Yes it'll ensure that myFunction will run after all the code above it if and only if the code above callback() is also synchronous. In example it's ensured that callback() will only be executed once viewport has been changed.
myFunctionshould change themetatag before the callback is called.