callback function return return($var & 1)?
$var & 1
- is bitwise AND
it checks if $var
is ODD value
0 & 0 = 0,
0 & 1 = 0,
1 & 0 = 0,
1 & 1 = 1
so, first callback function returns TRUE only if $var is ODD, and second - vise versa (! - is logical NOT). what does this mean return($var & 1);
The &
(ampersand) operator does bitwise AND
.
If $var
is odd it returns 1
, otherwise 0
.
Let's say $var = 13
, that in binary is 1101
(because 13 = 2^3 + 2^2 + 2^0
).
When you do 1101 & 0001
you get 0001
. So you can either get 1
if $var
has its last bit 1 (meaning it's odd) or 0
if $var
has 0 as the last bit, meaning that $var
is written as a sum of powers of two, without 2^0` meaning its even.
How to return value from an asynchronous callback function?
This is impossible as you cannot return from an asynchronous call inside a synchronous method.
In this case you need to pass a callback to foo that will receive the return value
function foo(address, fn){
geocoder.geocode( { 'address': address}, function(results, status) {
fn(results[0].geometry.location);
});
}
foo("address", function(location){
alert(location); // this is where you get the return value
});
The thing is, if an inner function call is asynchronous, then all the functions 'wrapping' this call must also be asynchronous in order to 'return' a response.If you have a lot of callbacks you might consider taking the plunge and use a promise library like Q.
How do I return the response from an asynchronous call?
→ For a more general explanation of asynchronous behaviour with different examples, see Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference→ If you already understand the problem, skip to the possible solutions below.
The problem
The A in Ajax stands for asynchronous. That means sending the request (or rather receiving the response) is taken out of the normal execution flow. In your example,$.ajax
returns immediately and the next statement, return result;
, is executed before the function you passed as success
callback was even called.Here is an analogy which hopefully makes the difference between synchronous and asynchronous flow clearer:
Synchronous
Imagine you make a phone call to a friend and ask him to look something up for you. Although it might take a while, you wait on the phone and stare into space, until your friend gives you the answer that you needed.
The same is happening when you make a function call containing "normal" code:
function findItem() {
var item;
while(item_not_found) {
// search
}
return item;
}
var item = findItem();
// Do something with item
doSomethingElse();
Even though findItem
might take a long time to execute, any code coming after var item = findItem();
has to wait until the function returns the result.Asynchronous
You call your friend again for the same reason. But this time you tell him that you are in a hurry and he should call you back on your mobile phone. You hang up, leave the house, and do whatever you planned to do. Once your friend calls you back, you are dealing with the information he gave to you.
That's exactly what's happening when you do an Ajax request.
findItem(function(item) {
// Do something with the item
});
doSomethingElse();
Instead of waiting for the response, the execution continues immediately and the statement after the Ajax call is executed. To get the response eventually, you provide a function to be called once the response was received, a callback (notice something? call back ?). Any statement coming after that call is executed before the callback is called.Solution(s)
Embrace the asynchronous nature of JavaScript! While certain asynchronous operations provide synchronous counterparts (so does "Ajax"), it's generally discouraged to use them, especially in a browser context.Why is it bad do you ask?
JavaScript runs in the UI thread of the browser and any long-running process will lock the UI, making it unresponsive. Additionally, there is an upper limit on the execution time for JavaScript and the browser will ask the user whether to continue the execution or not.
All of this results in a really bad user experience. The user won't be able to tell whether everything is working fine or not. Furthermore, the effect will be worse for users with a slow connection.
In the following we will look at three different solutions that are all building on top of each other:
- Promises with
async/await
(ES2017+, available in older browsers if you use a transpiler or regenerator) - Callbacks (popular in node)
- Promises with
then()
(ES2015+, available in older browsers if you use one of the many promise libraries)
ES2017+: Promises with async/await
The ECMAScript version released in 2017 introduced syntax-level support for asynchronous functions. With the help of async
and await
, you can write asynchronous in a "synchronous style". The code is still asynchronous, but it's easier to read/understand.
async/await
builds on top of promises: an async
function always returns a promise. await
"unwraps" a promise and either result in the value the promise was resolved with or throws an error if the promise was rejected.
Important: You can only use await
inside an async
function or in a JavaScript module. Top-level await
is not supported outside of modules, so you might have to make an async IIFE (Immediately Invoked Function Expression) to start an async
context if not using a module.
You can read more about async
and await
on MDN.
Here is an example that elaborates the delay function findItem()
above:
// Using 'superagent' which will return a promise.
var superagent = require('superagent')
// This is isn't declared as `async` because it already returns a promise
function delay() {
// `delay` returns a promise
return new Promise(function(resolve, reject) {
// Only `delay` is able to resolve or reject the promise
setTimeout(function() {
resolve(42); // After 3 seconds, resolve the promise with value 42
}, 3000);
});
}
async function getAllBooks() {
try {
// GET a list of book IDs of the current user
var bookIDs = await superagent.get('/user/books');
// wait for 3 seconds (just for the sake of this example)
await delay();
// GET information about each book
return superagent.get('/books/ids='+JSON.stringify(bookIDs));
} catch(error) {
// If any of the awaited promises was rejected, this catch block
// would catch the rejection reason
return null;
}
}
// Start an IIFE to use `await` at the top level
(async function(){
let books = await getAllBooks();
console.log(books);
})();
Current browser and node versions support async/await
. You can also support older environments by transforming your code to ES5 with the help of regenerator (or tools that use regenerator, such as Babel).Let functions accept callbacks
A callback is when function 1 is passed to function 2. Function 2 can call function 1 whenever it is ready. In the context of an asynchronous process, the callback will be called whenever the asynchronous process is done. Usually, the result is passed to the callback.
In the example of the question, you can make foo
accept a callback and use it as success
callback. So this
var result = foo();
// Code that depends on 'result'
becomesfoo(function(result) {
// Code that depends on 'result'
});
Here we defined the function "inline" but you can pass any function reference:function myCallback(result) {
// Code that depends on 'result'
}
foo(myCallback);
foo
itself is defined as follows:function foo(callback) {
$.ajax({
// ...
success: callback
});
}
callback
will refer to the function we pass to foo
when we call it and we pass it on to success
. I.e. once the Ajax request is successful, $.ajax
will call callback
and pass the response to the callback (which can be referred to with result
, since this is how we defined the callback).You can also process the response before passing it to the callback:
function foo(callback) {
$.ajax({
// ...
success: function(response) {
// For example, filter the response
callback(filtered_response);
}
});
}
It's easier to write code using callbacks than it may seem. After all, JavaScript in the browser is heavily event-driven (DOM events). Receiving the Ajax response is nothing else but an event.Difficulties could arise when you have to work with third-party code, but most problems can be solved by just thinking through the application flow.
ES2015+: Promises with then()
The Promise API is a new feature of ECMAScript 6 (ES2015), but it has good browser support already. There are also many libraries which implement the standard Promises API and provide additional methods to ease the use and composition of asynchronous functions (e.g., bluebird).
Promises are containers for future values. When the promise receives the value (it is resolved) or when it is canceled (rejected), it notifies all of its "listeners" who want to access this value.
The advantage over plain callbacks is that they allow you to decouple your code and they are easier to compose.
Here is an example of using a promise:
function delay() {
// `delay` returns a promise
return new Promise(function(resolve, reject) {
// Only `delay` is able to resolve or reject the promise
setTimeout(function() {
resolve(42); // After 3 seconds, resolve the promise with value 42
}, 3000);
});
}
delay()
.then(function(v) { // `delay` returns a promise
console.log(v); // Log the value once it is resolved
})
.catch(function(v) {
// Or do something else if it is rejected
// (it would not happen in this example, since `reject` is not called).
});
.as-console-wrapper { max-height: 100% !important; top: 0; }
javascript: returning value from anonymous function
You need to call the callback and return the value of it and inside your bar
function, you need to return the result as well
function foo(myCallback){ // return the value of the call myCallback() return myCallback();}
function bar(){ var result = foo(function(){ var result = "hello"; return result; }); // return the result return result;}var showResult = bar();alert(showResult);
I create a callback function and declare one time. but it'll do multiple task. how can I do this?
You seem to be looking for
function result (value_1, value_2, callback) {
var output = callback(value_1, value_2);
return output;
}
This function of course is a bit pointless, the caller simply should have directly called the function with the operation. To make it a bit more useful and demonstrate the benefits of callbacks, you could dofunction compute(value_1, value_2, operation) {
const name = operator.name;
const result = operation(value_1, value_2);
console.log(`${name}(${value_1}, ${value_2}) = ${result}`);
return result;
}
How to return a value from a function that calls $.getJSON?
This happens because that callback function (function(data) {...}
) runs later when the response comes back...because it's an asynchronous function. Instead use the value once you have it set, like this:
function lookupRemote(searchTerm)
{
var defaultReturnValue = 1010;
var returnValue = defaultReturnValue;
$.getJSON(remote, function(data) {
if (data != null) {
$.each(data.items, function(i, item) {
returnValue = item.libraryOfCongressNumber;
});
}
OtherFunctionThatUsesTheValue(returnValue);
});
}
This is the way all asynchronous behavior should be, kick off whatever needs the value once you have it...which is when the server responds with data.
Related Topics
Symfony 3.1.5 Warning: Sessionhandler::Read(): Session Data File Is Not Created by Your Uid
The Behaviour of the or Operator in PHP
Using PHP & Curl to Login to My Websites Form
Difference Between Directoryiterator and Filesystemiterator
How to Call Curl_Setopt with Curlopt_Httpheader Multiple Times to Set Multiple Headers
Speeding Up Large Numbers of MySQL Updates and Inserts
PHP Readfile() and Large Files
How to Select a MySQL Database to Use with Pdo in PHP
A Better Way to Replace Emoticons in PHP
PHP Exec() Command: How to Specify Working Directory
MySQL Int(11) Number Out of Range
How to Connect an Oracle Database from PHP
Check Image Dimensions (Height and Width) Before Uploading Image Using PHP
Ffmpeg Mamp "Dyld: Library Not Loaded" Error