• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Javascript中异步编程简介
 

Javascript中异步编程简介

on

  • 1,874 views

 

Statistics

Views

Total Views
1,874
Views on SlideShare
1,874
Embed Views
0

Actions

Likes
7
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Javascript中异步编程简介 Javascript中异步编程简介 Presentation Transcript

    • 异步编程中的流程控制 Javascript异步编程简介12年4月9日星期⼀一
    • 关于我 http://jser.me 草依山 @ihubo http://ihubo.renren.com 人人网 FED 前端工程师12年4月9日星期⼀一
    • 提纲 异步编程在前端的场景 发展过程 Promise规范 JQuery的Deferred Jscex12年4月9日星期⼀一
    • 什么是异步 异步的概念和同步相对。 当⼀一个异步过程调用发出后,调用者不能立刻 得到结果。实际处理这个调用的部件在完成 后,通过状态、通知和回调来通知调用者。 未来的某个时刻完成的操作12年4月9日星期⼀一
    • 哪里会异步 浏览器里 各种事件(key*, mouse*, load, postMessage, requestAnimationFrame) 定时器(setTimeout/setInterval) Node.js里 IO、Net ... ...12年4月9日星期⼀一
    • 从简单回调开始 asyncTask.success(function(){}); btnA.onClick = function(){}; setTimeout(function(){}, 3000);12年4月9日星期⼀一
    • 遇到问题了 A: asnycTask.succ(function(){ B.doSomething(); C.doSomething(); D.doSomething(); }); 需要回调的函数太多,调用者 与被调用者之间耦合过强12年4月9日星期⼀一
    • 自定义事件 A: A.fireEvent(‘succ’, evtObj); B: A.addEvent(‘success’, function(e){}); C: A.addEvent(‘success’, function(e){});12年4月9日星期⼀一
    • 多级回调带来问题 asyncTask.succ(function(){ A.succ(function(){ B.succ(function(){ C.succ(function(){ ... }); }); }); }); 代码丑陋,不利阅读,不利维护12年4月9日星期⼀一
    • CommonJS Promise规范 http://wiki.commonjs.org/wiki/Promises 用于简化多异步回调操作 有A/B/C/D/KISS 四种形式12年4月9日星期⼀一
    • Promise/A ⼀一个Promise只能有三种状态 未完成、完成、 失败 只能 未完成-->完成 未完成-->失败 ⼀一旦完成或者失败,不能再修改 promise必须有⼀一个then方法 then(fulfilledHandler, errorHandler, progressHandler)12年4月9日星期⼀一
    • Promise with Jquery 从1.5开始引用Deferred对象,实现Promise/A 多个事件指定⼀一个回调$.when(taskA, taskB) deferred.resolve和deferred.reject改变状态 deferred.promise() 没有参数时,返回⼀一个新的 deferred对象,该对象的运行状态无法被改 变;接受参数时,作用为在参数对象上部署 deferred接口。12年4月9日星期⼀一
    • var promise = $.ajax({ url: "/myServerScript" });   promise.done(myStopAnimationFun ction); promise.done(myOtherAjaxFunctio n); promise.done(myShowInfoFunction ); promise.fail(myErrorFunction);12年4月9日星期⼀一
    • var promise1 = $.ajax("/ myServerScript1"); var promise2 = $.ajax("/ myServerScript2");   $.when(promise1, promise2).then(function(response1, response2){ // Handle both responses });12年4月9日星期⼀一
    • var taskA = function(){ var dtd = $.Deferred(); setTimeout(function(){ console.log( A finished ); dtd.resolve(); }, 2000); return dtd.promise(); }, taskB = function(){ console.log( B finished );}, taskC = function(){ console.log( C finished );}; $.when( taskA() ) .then( taskB ) .then( taskC );12年4月9日星期⼀一
    • async https://github.com/caolan/async 非promise规范的实现,拥有大量简洁实用的 api,开发异步程序的瑞士军刀 Node.js开发必备12年4月9日星期⼀一
    • API: series parallel whilst until waterfall queue12年4月9日星期⼀一
    • async.series({ one: function(callback){ setTimeout(function(){ callback(null, 1); }, 200); }, two: function(callback){ setTimeout(function(){ callback(null, 2); }, 100); }, }, function(err, results) { // results is now equal to: {one: 1, two: 2} });12年4月9日星期⼀一
    • async.parallel([ function(callback){ setTimeout(function(){ callback(null, one); }, 200); }, function(callback){ setTimeout(function(){ callback(null, two); }, 100); }, ], // optional callback function(err, results){ // the results array will equal [one,two] even though // the second function had a shorter timeout. });12年4月9日星期⼀一
    • async.waterfall([ function(callback){ callback(null, one, two); }, function(arg1, arg2, callback){ callback(null, three); }, function(arg1, callback){ // arg1 now equals three callback(null, done); } ], function (err, result) { // result now equals done });12年4月9日星期⼀一
    • jscex 国产神器 以同步的简单思维书写异步代码 提供⼀一个$await操作,输入的代码会被编译成 普通的回调形式12年4月9日星期⼀一
    • var printAsync = eval(Jscex.compile("async", function (text) { console.log(text); })); // 得到Jscex.Async.Task对象 var task = printAsync("Hello World"); task.start(); // 输出“Hello World”12年4月9日星期⼀一
    • var Task = Jscex.Async.Task; var getFollowersAsync = eval(Jscex.compile("async", function (userId) { // 获取所有追随者的ID var followerIds = $await(getFollowerIds(userId)); return $await(Task.whenAll({ user: getUserAsync(userId), followers: followerIds.map(function (id) { return getUserAsync(id); }) })); }); getFollowersAsync(123).start();12年4月9日星期⼀一
    • End12年4月9日星期⼀一