Class Structure
First, let’s set up a shelf and list all the variables that need to be used. We need an array to save the callback function list; we need a flag bit to indicate whether the asynchronous operation has been completed; we can also learn IAsyncResult and add a state to allow the implementer of the asynchronous operation to expose the customized execution state to the outside; and finally add a variable to save the result of the asynchronous operation.
Async = {
Operation: {
var callbackQueue = [];
= undefined;
= "waiting";
= false;
}
}
addCallback method
Next, we want to implement the addCallback method. Its job responsibilities are very simple, which is to put the callback function into the callbackQueue. In addition, if completed is true at this time, it means that the asynchronous operation has been yielded, and this callback will be called immediately.
= function(callback) {
(callback);
if () {
();
}
return this;
}
We assume that the yield method will take out the callback functions in the callbackQueue one by one and call it. Therefore, if calculated is true, use the existing result to call yield again. In this way, yield will naturally call the callback function added to the callbackQueue this time.
As for the final return this;, just to facilitate the jQuery-style chain writing, multiple callback functions can be added continuously by point separation:
asyncOperation(argument)
.addCallback(firstCallback)
.addCallback(secondCallback);
yield method
Finally, we want to implement the yield method. It needs to take out the callback functions in the callbackQueue one by one, and then call them all, and ensure that this operation is asynchronous.
= function(result) {
var self = this;
setTimeout(function() {
= result;
= "completed";
= true;
while ( > 0) {
var callback = ();
callback();
}
}, 1);
return this;
}
By using setTimeout, we ensure that the actual operation of yield is performed asynchronously. Then we update the result and related state of the user's incoming yield to the object properties, and finally traverse the callbackQueue to call all callback functions.
summary
In this way, we have made a simple JavaScript asynchronous call framework. The complete code can be found here: asynchronous call framework.
This framework can solve the coexistence of synchronous asynchronous operations in the call stack. Assuming that all functions return, the framework user can use a unified pattern to write code and handle function returns without caring about whether the function actually returns synchronously or asynchronously.
For the case where multiple asynchronous functions are called serially, we can now write in the form of nested addCallback, but as the number of nested layers increases, the code will become less and less beautiful:
firstAsyncOperation().addCallback(function() {
secondAsyncOperation().addCallback(function() {
thirdAsyncOperation().addCallback(function() {
finalSyncOperation();
});
});
});
Can we change the nested form to a jQuery-style chain writing? This is the question we need to think about next, if you don't want to miss the related discussion
First, let’s set up a shelf and list all the variables that need to be used. We need an array to save the callback function list; we need a flag bit to indicate whether the asynchronous operation has been completed; we can also learn IAsyncResult and add a state to allow the implementer of the asynchronous operation to expose the customized execution state to the outside; and finally add a variable to save the result of the asynchronous operation.
Copy the codeThe code is as follows:
Async = {
Operation: {
var callbackQueue = [];
= undefined;
= "waiting";
= false;
}
}
addCallback method
Next, we want to implement the addCallback method. Its job responsibilities are very simple, which is to put the callback function into the callbackQueue. In addition, if completed is true at this time, it means that the asynchronous operation has been yielded, and this callback will be called immediately.
Copy the codeThe code is as follows:
= function(callback) {
(callback);
if () {
();
}
return this;
}
We assume that the yield method will take out the callback functions in the callbackQueue one by one and call it. Therefore, if calculated is true, use the existing result to call yield again. In this way, yield will naturally call the callback function added to the callbackQueue this time.
As for the final return this;, just to facilitate the jQuery-style chain writing, multiple callback functions can be added continuously by point separation:
Copy the codeThe code is as follows:
asyncOperation(argument)
.addCallback(firstCallback)
.addCallback(secondCallback);
yield method
Finally, we want to implement the yield method. It needs to take out the callback functions in the callbackQueue one by one, and then call them all, and ensure that this operation is asynchronous.
Copy the codeThe code is as follows:
= function(result) {
var self = this;
setTimeout(function() {
= result;
= "completed";
= true;
while ( > 0) {
var callback = ();
callback();
}
}, 1);
return this;
}
By using setTimeout, we ensure that the actual operation of yield is performed asynchronously. Then we update the result and related state of the user's incoming yield to the object properties, and finally traverse the callbackQueue to call all callback functions.
summary
In this way, we have made a simple JavaScript asynchronous call framework. The complete code can be found here: asynchronous call framework.
This framework can solve the coexistence of synchronous asynchronous operations in the call stack. Assuming that all functions return, the framework user can use a unified pattern to write code and handle function returns without caring about whether the function actually returns synchronously or asynchronously.
For the case where multiple asynchronous functions are called serially, we can now write in the form of nested addCallback, but as the number of nested layers increases, the code will become less and less beautiful:
Copy the codeThe code is as follows:
firstAsyncOperation().addCallback(function() {
secondAsyncOperation().addCallback(function() {
thirdAsyncOperation().addCallback(function() {
finalSyncOperation();
});
});
});
Can we change the nested form to a jQuery-style chain writing? This is the question we need to think about next, if you don't want to miss the related discussion