JavaScript

で作る

Web Application


@ww24






でも使える



非同期

フロー制御

ライブラリ







Async Flow

# 自己紹介


NAME: 中川 武憲 @ww24

AGE: 0x13

JOB: 大学生
アルバイト  

LANGUAGE: JavaScript

IL たん


IT 勉強会カレンダー for Smartphone









JavaScript 書いてる人 ノ

( ´ ▽ ` )ノ ( ´ ω ` )ノ ( ´ ∀ ` )ノ




Browser サイドの人

( ´ ▽ ` )ノ


  • IE 対応つらい…
  • Opera が WebKit になると聞いて安堵してる
  • IE の次に強敵… スマホブラウザ
  • etc...




Server サイドの人

( ´ ω ` )ノ


  • Node.js
  • Rhino
  • Phantom.js
  • etc...




その他の人

( ´ ∀ ` )ノ


  • Titanium mobile
  • Phone Gap
  • Web View
  • Browser Extension
  • etc...






JavaScript で非同期処理

JavaScript で非同期処理


var fs = require("fs"),
    path = require("path");

var dirpath = __dirname,
    count = 0;
fs.readdir(dirpath, function (err, files) {
    files.forEach(function (file) {
        var filepath = path.join(dirpath, file);
        fs.stat(filepath, function (err, stats) {
            if (stats.isFile()) {
                count++;
                fs.readFile(filepath, function (err, data) {
                    var copypath = path.join(dirpath, "copy-" + path.basename(filepath));
                    fs.writeFile(copypath, data, function () {
                        if (--count === 0) {
                            console.log("complete");
                        }
                    });
                });
            }
        });
    });
});







コールバック地獄

インデント
  インデント
    インデント
      インデント
        インデント
          インデント
            インデント
              インデ







どうすれば良いか

インデントを入れない


var fs = require("fs"),
path = require("path");

var dirpath = __dirname,
count = 0;
fs.readdir(dirpath, function (err, files) {
files.forEach(function (file) {
var filepath = path.join(dirpath, file);
fs.stat(filepath, function (err, stats) {
if (stats.isFile()) {
count++;
fs.readFile(filepath, function (err, data) {
var copypath = path.join(dirpath, "copy-" + path.basename(filepath));
fs.writeFile(copypath, data, function () {
if (--count === 0) {
console.log("complete");
}
});
});
}
});
});
});







(ヾノ・∀・`)ナイナイ







ライブラリを使う

ライブラリ


  • async.js
  • $.Deferred
  • etc...

async.js


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'    
});

async.js


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.
});

Async Flow


flow.create().flow(function (next) {
    next("one", "two");
}).flow(function (next, arg1, arg2) {
    next("three");
}).flow(function (next, arg1) {
    // arg1 === "three" => true
    next("done");
}).flow(function (next, results) {
    // results === "done" => true
});
sequential

Async Flow


var flowA = flow.create().flow(function (next) {
    setTimeout(function () {
        next(null, "one");
    }, 200);
});
var flowB = flow.create().flow(function (next) {
    setTimeout(function () {
        next(null, "two");
    }, 100);
});
flow.create(flowA, flowB).flow(function (next, arg1, arg2) {
  // arg1 === "one" => true
  // arg2 === "two" => true
});
parallel






簡単に非同期フローを操る。

ご清聴ありがとうございました




js web application

By ww24

js web application

  • 3,143
Loading comments...

More from ww24