Contenu connexe Similaire à Async Enhancement (20) 11. // sorry node.js code
var fs = require(“fs”);
// Sync read directory
var files = fs.readdirSync(“.”);
console.log(files);
console.log(“conmplate”);
// Async read directory
fs.readdir(“.", function(err, files){
if (err) throw err;
console.log(files);
});
console.log(“complate…?”);
15. // document ready
$(function(){
var $target = $(".initAnimetion”);
$target.fadeIn( "slow", function() {
setTimeout(function(){
$target.fadeOut( "slow", function() {
console.log( "completed!!!" );
})
}), 2*1000 ); //2秒待つ
});
});
19. // example
(function($){
$.mySuperElegantLibrary = (function(){
var hoge = “”;
var fuga = “”;
return {
miracleMethod: function(arg1,cb){
if(typeof(arg1) === 'function') cb = arg1;
if((cb == null)) cb = $.noop;
},
specialMethod: function(arg1,cb){
if(typeof(arg1) === 'function') cb = arg1;
if((cb == null)) cb = $.noop;
}
}
})();
})(jQuery);
24. // example catching error
(function(){
try{
throw new Error("エラーです");
}catch(e){
console.log(e);
console.log("ここで正しい処理をします")
}
})();
25. // example catching error…???
// callback method inner is wonder land
(function(){
try{
setTimeout(function(){
throw new Error("エラーです");
},1000);
}catch(e){
console.log(e);
console.log("ここでただしい処理をしますし（時間差）");
}})();
28. // async methods
var A = function(cb){
setTimeout(function(){
cb("1秒掛かる処理を実行しました");
},1000);
};
var B = function(cb){
setTimeout(function(){
cb("5秒掛かる処理を実行しました");
},5000);
};
var C = function(cb){
setTimeout(function(){
cb("2秒掛かる処理を実行しました");
},2000);
};
30. //oh! very easy
var result =[];
A(function(message1){
console.log(message1);
result.push(message1);
B(function(message2){
console.log(message2);
result.push(message2);
C(function(message3){
console.log(message3);
result.push(message3);
console.log("全ての処理がおわりました");
console.log(result);
});
});
});
33. // parallels
var allRequest = [A,B,C];
var result =[];
var counter = allRequest.length;
allRequest.forEach(function(request,i){
console.log(i); // 0,1,2
request(function(message){
// Message出力（単体）
console.log(message);
result[i] = message;
console.log(i); //0,2,1 <—-?
if(--counter == 0){
// Message出力（全体）
console.log("全ての処理がおわりました");
console.log(result);
}
});
});
44. // no problem
(function($){
$(function(){
// display none
$("#content").children().hide();
//forEach
$("#content").children().each(function(i,item){
// show
setTimeout(function(){
$(item).fadeIn("slow");
}, i * 1000);
})
})
})(jQuery)
46. // problems happen…
// why!!! JavaScript looping!!
(function($){
$(function(){
// display none
$("#content").children().hide();
var children = $("#content").children();
for(var i=0; i < children.length; i++){ //for loop
// show
setTimeout(function(){
var item = children[i];
$(item).fadeIn("slow");
}, i * 1000);
}
})
})(jQuery)
47. // changing code…
(function($){
$(function(){
// display none
$(“#content”).children().hide();
var show = function(i){
// show
setTimeout(function(){
var item = children[i];
$(item).fadeIn("slow");
}, i * 1000);
}
var children = $("#content").children();
for(var i=0; i < children.length; i++){ //for loop
show(i)
}
})
})(jQuery)
48. // before parallels process
var allRequest = [A,B,C];
var result =[];
var counter = allRequest.length;
for(var i=0; i<allRequest.length; i++){
console.log(i); // 0,1,2
allRequest[i](function(message){
// Message出力（単体）
console.log(message);
result[i] = message;
console.log(i); //3,3,3 <- !!!
if(--counter == 0){
// Message出力（全体）
console.log("全ての処理がおわりました");
console.log(result);
}
});
}
55. // promise…then…catch
var promise = new Promise(function(resolve,reject){
// example async progress
doSomhing(function(error, data){
if(error) return reject(error);
resolve(data);
})
});
promise.then(function(data){
// with success
}).catch(function(error){
// fail…
})
56. // parallel…then…catch
var promise1 = new Promise(function(resolve,reject){
// example async progress
doSomhing(function(error, data1){
if(error) return reject(error);
resolve(data1);
})
});
var promise2 = new Promise(function(resolve,reject){
// 省略
resolve(data2)
});
Promise.all([promise1,promise2]).then(function(result){
// with success
console.log(result); // [data1,data2]
}).catch(function(error){
// fail…
})
59. async.waterfall([function(next){
console.log(“1”);
setTimeout(function(){
console.log(“1 complete”);
next(null, 1); //next(error, result);
},3000);
},function(next){
console.log(“2”)
setTimeout(function(){
console.log(“2 complete”);
next(null, 2); //next(error, result);
},3000);
}], function(err, result1, result2 ){
console.log(err); // …null
console.log(result1); //…1
console.log(result2); //…2
});
62. JavaScript Promises ※ 公開日 2013/12/16
http://www.html5rocks.com/ja/tutorials/es6/promises/
Conformant Implementations
https://promisesaplus.com/implementations
64. // promise…then…catch
var promise = function(){
var deferred = q.deferred();
// example async progress
doSomething(function(error, data){
if(error) return deferred.reject(error);
deferred.resolve(data);
})
return deferred.promise;
});
promise.then(function(result){
// with success
console.log(result); // data
}).catch(function(error){
// fail…
})
65. // parallel…then…catch
var promise1 = function(){
var deferred = q.deferred();
// set deferred.reject(data1) & deferred.resolve(error)
return deferred.promise;
});
var promise2 = function(){
var deferred = q.deferred();
// set deferred.reject(data2) & deferred.resolve(error)
return deferred.promise;
});
q.all([promise1(), promise2()]).then(function(result){
// with success
console.log(result); // [data1,data2]
}).catch(function(error){
// fail…
})
