Basics of Asynchronous operations www. akvelon. com
Basics of Asynchronous operations Definitions • An asynchronous operation is executed on a thread that is different from the main thread, a thread being a separate execution path. (For example: AJAX calls to the server) • The promise (also known as a future or deferred) object provides a mechanism to schedule work to be done on a value that might not yet be computed. www. akvelon. com Slide 2 of 11
Basics of Asynchronous operations Creating j. Query promise objects by using $. Deferred() • You can create a promise object by using the $. Deferred method. It seems a bit strange that the method name is not called $. Promise(), but $. Deferred() returns a deferred object that wraps the promise object with the functionality to control the promise object. function timeout. Async(milliseconds) { var deferred = $. Deferred(); set. Timeout(function () { deferred. resolve(); }, milliseconds); return deferred. promise(); } www. akvelon. com Slide 3 of 11
Basics of Asynchronous operations • The methods that end with “with” pass data to the promise object’s subscribers. The creator of the deferred object can execute the promise method on the deferred object to get the promise object, which is read -only. Code that references the promise object can subscribe to state changes on that object but cannot modify its state. function abc. Async() { var promise = timeout. Async(2000); promise. done(function () { alert('done!')}); promise. fail(function () { alert('failed!') }); promise. always(function () { alert('always!') }); return promise; } • “always!” message before the “done!” or “failed!” message because the always subscription is before the others. www. akvelon. com Slide 4 of 11
Basics of Asynchronous operations Chaining promises by using the pipe method • If the first asynchronous call fails, the failure is automatically passed to the piped promise object in the chain • The pipe method created a proxy object and returned it, but after 6 seconds, the call to timeout. Async(1234) created a promise object, which was then attached to the original proxy object. function abc. Async() { var first. Promise = timeout. Async(2000); var second. Promise = first. Promise. pipe(function () { return timeout. Async(3000); }); var third. Promise = second. Promise. pipe(function () { return timeout. Async(1000); }); var fourth. Promise = third. Promise. pipe(function () { return timeout. Async(1234); }); fourth. Promise. done(function () { first. Promise. done(function () { alert('done!'); }); return fourth. Promise; } www. akvelon. com Slide 5 of 11
Basics of Asynchronous operations Parallel execution using $. when(). then() function abc. Async() { var deferred = $. Deferred(); var first. Promise = timeout. Async(2000); var second. Promise = timeout. Async(3000); var third. Promise = timeout. Async(1000); var fourth. Promise = timeout. Async(1234); $. when(first. Promise, second. Promise, third. Promise, fourth. Promise). then(function () { alert('done!'); deferred. resolve(); }, function () { deferred. reject(); }); return deferred. promise(); } www. akvelon. com You can use the $. when() method to indicate completion of multiple asynchronous operations. The $. when() method is non-blocking, so it’s usually used with a deferred object. In the following example, the previous example is rewritten to run all four operations in parallel. Slide 6 of 11
Basics of Asynchronous operations Updating progress The deferred object can also notify its promise object when progress has changed. It does this by executing the notify method of the deferred object when you want to update the progress. The promise object has a progress method that accepts a function called when the notify method is executed function abc. Async() { var deferred = $. Deferred(); var count = 0; var first. Promise = timeout. Async(2000); var fourth. Promise = timeout. Async(1234); first. Promise. always(function () { deferred. notify( ++count); }); fourth. Promise. always(function () { deferred. notify(++count); }); $. when(first. Promise, fourth. Promise). then(function () { alert('done!'); deferred. resolve(); }, function () { deferred. reject(); }); return deferred. promise(); } www. akvelon. com Slide 7 of 11
Basics of Asynchronous operations Working with web workers Another way to perform asynchronous operations is to use web workers. Web workers are useful for execution of a script file in a background task. The worker can send messages to the spawning task by posting messages to an event handler specified by the creator. Messages can be any object that can be serialized. The worker thread doesn’t block the user interface thread, so the UI remains fast and fluid. Web workers’ state is isolated from the webpage. When messages are posted to and from the web worker, the message object is serialized. This creates a copy of the message, so the web worker and the creator never reference the same object. Web workers also lack synchronization locks, critical sections, semaphores, or mutexes. They don’t have access to the document object model (DOM), so if you need to access the DOM, the web worker must post a message back to the creator, and the creator must process the message and access the DOM as needed. www. akvelon. com Slide 8 of 11
Basics of Asynchronous operations <!DOCTYPE html> <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1. 8. 2. js"></script> <script src="default. js"></script> </head> <body> <input type="text" id="message" value="Enter message here" /> <button id="btn. Send" type="button">Send Message</button> <div id="result"></div> </body> </html> www. akvelon. com This HTML page has a reference to j. Query and a default. js file. The default. js file has code to create a new web worker by calling the Worker() constructor and passing the URI of a script to execute. You can receive notifications from the web worker by setting the onmessage and the onerror properties to an event handler function. Slide 9 of 11
Basics of Asynchronous operations Default. js my. Work. js var worker = new Worker('my. Work. js'); worker. onmessage = function (e) { $('#result'). append(e. data + ' '); }; worker. onerror = function (e) { $('#result'). append('Error: ' + e. data + ' '); }; $('document'). ready(function () { $('#btn. Send'). on('click', function () { worker. post. Message($('#message'). val()); }); self. onmessage = function (e) { for (c in e. data) { post. Message(e. data[c]. to. Upper. Case()); } } You can stop a web worker by calling the worker. terminate() method from the creator or calling the close() method inside the worker itself. www. akvelon. com Slide 10 of 11
Basics of Asynchronous operations More Information: • Email: denis. golovko@akvelon. com • Google. com / Yandex. ru • Johnson G. Programming In HTML 5 With Java. Script And CSS 3: Training Guide Thank you! www. akvelon. com Slide 11 of 11
Скачать презентацию Basics of Asynchronous operations www akvelon com
async.pptx