JavaScriptプログラミングにおける同期・非同期の仕組みを深く理解する

JavaScript の長所の 1 つは、非同期コードの処理方法です。非同期コードはイベントキューに入れられ、スレッドをブロックせずに他のすべてのコードが実行されるまで待機します。ただし、初心者にとって非同期コードの作成は難しい場合があります。この記事では、あなたが抱いているかもしれない混乱を解消します。
非同期コードを理解する

JavaScript の最も基本的な非同期関数は、setTimeout と setInterval です。 setTimeout は、一定の時間が経過した後に指定された関数を実行します。最初のパラメータとしてコールバック関数を受け入れ、2 番目のパラメータとしてミリ秒時間を受け入れます。以下は使用例です:

console.log( "a" );
setTimeout(function() {
  console.log( "c" )
}, 500 );
setTimeout(function() {
  console.log( "d" )
}, 500 );
setTimeout(function() {
  console.log( "e" )
}, 500 );
console.log( "b" );

ログイン後にコピー

予想どおり、コンソールは最初に「a」と「b」を出力し、約 500 ミリ秒後に「c」、「d」、「e」が表示されます。 setTimeout は実際には予測できないため、「およそ」を使用しています。実際、HTML5 仕様でもこの問題について言及しています:

「この API は、タイミングが期待どおりに正確に実行されることを保証しません。CPU 負荷や他のタスクなどによる遅延が予想されます。」

興味深いことに、同じセグメント内の残りのコードがすべて実行を完了するまでタイムアウトは発生しません。したがって、タイムアウトが設定されていて、長時間実行される関数が実行された場合、関数が完了するまでタイムアウトは開始されません。実際、setTimeout や setInterval などの非同期関数は、イベントループと呼ばれるキューにプッシュされます。

イベントループはコールバック関数のキューです。非同期関数が実行されると、コールバック関数がこのキューにプッシュされます。 JavaScript エンジンは、非同期関数の実行が完了するまでイベントループの処理を開始しません。これは、JavaScript コードは同様に動作するにもかかわらず、マルチスレッドではないことを意味します。イベントループは先入れ先出し (FIFO) キューです。これは、コールバックがキューに入れられた順序で実行されることを意味します。 JavaScript が Node の開発言語として選択されたのは、そのようなコードを記述するのが非常に簡単であるためです。

アヤックス

Asynchronous Javascript and XML (AJAX) は、JavaScript 言語の状況を永久に変えました。突然、Web ページを更新するためにブラウザをリロードする必要がなくなりました。さまざまなブラウザーで Ajax を実装するコードは長くて面倒な場合がありますが、jQuery (およびその他のライブラリ) のおかげで、簡単かつ洗練された方法でクライアントとサーバーの通信を実現できます。

jQuery クロスブラウザインターフェイス $.ajax を使用してデータを簡単に取得できますが、舞台裏で何が起こっているかを示すことはできません。例:

var data;
$.ajax({
  url: "some/url/1",
  success: function( data ) {
    // But, this will!
    console.log( data );
  }
})
// Oops, this won't work...
console.log( data );

ログイン後にコピー

最もよくある間違いは、$.ajax を呼び出した直後にデータを使用することですが、実際には次のようになります:

xmlhttp.open( "GET", "some/ur/1", true );
xmlhttp.onreadystatechange = function( data ) {
  if ( xmlhttp.readyState === 4 ) {
    console.log( data );
  }
};
xmlhttp.send( null );

ログイン後にコピー

基になる XmlHttpRequest オブジェクトはリクエストを開始し、XHR のreadystatetechnage イベントを処理するコールバック関数を設定します。次にXHRのsendメソッドを実行します。 XHR の実行中、readyState 属性が変化すると、readystatechange イベントがトリガーされ、XHR がリモートサーバーからの応答の受信を終了したときにのみ、コールバック関数が実行をトリガーします。

非同期コードの処理

非同期プログラミングは、よく「コールバック地獄」と呼ばれる状況に簡単に陥る可能性があります。実際、JS のほとんどすべての非同期関数はコールバックを使用するため、いくつかの非同期関数を継続的に実行すると、ネストされたコールバック関数の層とその結果として複雑なコードが生成されます。

node.js の多くの関数も非同期です。したがって、次のコードは基本的に非常に一般的です:

var fs = require( "fs" );
fs.exists( "index.js", function() {
  fs.readFile( "index.js", "utf8", function( err, contents ) {
    contents = someFunction( contents ); // do something with contents
    fs.writeFile( "index.js", "utf8", function() {
      console.log( "whew! Done finally..." );
    });
  });
});
console.log( "executing..." );

ログイン後にコピー

次のクライアントコードも一般的です:

GMaps.geocode({
  address: fromAddress,
  callback: function( results, status ) {
    if ( status == "OK" ) {
      fromLatLng = results[0].geometry.location;
      GMaps.geocode({
        address: toAddress,
        callback: function( results, status ) {
          if ( status == "OK" ) {
            toLatLng = results[0].geometry.location;
            map.getRoutes({
              origin: [ fromLatLng.lat(), fromLatLng.lng() ],
              destination: [ toLatLng.lat(), toLatLng.lng() ],
              travelMode: "driving",
              unitSystem: "imperial",
              callback: function( e ){
                console.log( "ANNNND FINALLY here's the directions..." );
                // do something with e
              }
            });
          }
        }
      });
    }
  }
});

ログイン後にコピー

ネストされたコールバックは非常に厄介になる可能性がありますが、このスタイルのコーディングにはいくつかの解決策があります。

ネストされたコールバックはコードに「嫌な臭い」をもたらしやすいですが、次のスタイルを使用してこの問題を解決することができます

悪い言語は存在しません、悪いプログラマだけが存在します - 非同期 JavaScript

名前付き関数

ネストされたコールバックをクリアするための便利な解決策は、単純に 3 レベルを超えるネストを避けることです。匿名関数を渡す代わりに、名前付き関数をコールバックパラメーターとして渡します:

var fromLatLng, toLatLng;
var routeDone = function( e ){
  console.log( "ANNNND FINALLY here's the directions..." );
  // do something with e
};
var toAddressDone = function( results, status ) {
  if ( status == "OK" ) {
    toLatLng = results[0].geometry.location;
    map.getRoutes({
      origin: [ fromLatLng.lat(), fromLatLng.lng() ],
      destination: [ toLatLng.lat(), toLatLng.lng() ],
      travelMode: "driving",
      unitSystem: "imperial",
      callback: routeDone
    });
  }
};
var fromAddressDone = function( results, status ) {
  if ( status == "OK" ) {
    fromLatLng = results[0].geometry.location;
    GMaps.geocode({
      address: toAddress,
      callback: toAddressDone
    });
  }
};
GMaps.geocode({
  address: fromAddress,
  callback: fromAddressDone
});

ログイン後にコピー

さらに、async.js ライブラリは、複数の Ajax リクエスト/レスポンスの処理に役立ちます。例:

async.parallel([
  function( done ) {
    GMaps.geocode({
      address: toAddress,
      callback: function( result ) {
        done( null, result );
      }
    });
  },
  function( done ) {
    GMaps.geocode({
      address: fromAddress,
      callback: function( result ) {
        done( null, result );
      }
    });
  }
], function( errors, results ) {
  getRoute( results[0], results[1] );
});

ログイン後にコピー

这段代码执行两个异步函数，每个函数都接收一个名为"done"的回调函数并在函数结束的时候调用它。当两个"done"回调函数结束后，parallel函数的回调函数被调用并执行或处理这两个异步函数产生的结果或错误。

Promises模型
引自 CommonJS/A：

promise表示一个操作独立完成后返回的最终结果。

有很多库都包含了promise模型，其中jQuery已经有了一个可使用且很出色的promise API。jQuery在1.5版本引入了Deferred对象，并可以在返回promise的函数中使用jQuery.Deferred的构造结果。而返回promise的函数则用于执行某种异步操作并解决完成后的延迟。

var geocode = function( address ) {
  var dfd = new $.Deferred();
  GMaps.geocode({
    address: address,
    callback: function( response, status ) {
      return dfd.resolve( response );
    }
  });
  return dfd.promise();
};
var getRoute = function( fromLatLng, toLatLng ) {
  var dfd = new $.Deferred();
  map.getRoutes({
    origin: [ fromLatLng.lat(), fromLatLng.lng() ],
    destination: [ toLatLng.lat(), toLatLng.lng() ],
    travelMode: "driving",
    unitSystem: "imperial",
    callback: function( e ) {
      return dfd.resolve( e );
    }
  });
  return dfd.promise();
};
var doSomethingCoolWithDirections = function( route ) {
  // do something with route
};
$.when( geocode( fromAddress ), geocode( toAddress ) ).
  then(function( fromLatLng, toLatLng ) {
    getRoute( fromLatLng, toLatLng ).then( doSomethingCoolWithDirections );
  });

ログイン後にコピー

这允许你执行两个异步函数后，等待它们的结果，之后再用先前两个调用的结果来执行另外一个函数。

promise表示一个操作独立完成后返回的最终结果。

在这段代码里，geocode方法执行了两次并返回了一个promise。异步函数之后执行，并在其回调里调用了resolve。然后，一旦两次调用resolve完成，then将会执行，其接收了之前两次调用geocode的返回结果。结果之后被传入getRoute，此方法也返回一个promise。最终，当getRoute的promise解决后，doSomethingCoolWithDirections回调就执行了。

事件
事件是另一种当异步回调完成处理后的通讯方式。一个对象可以成为发射器并派发事件，而另外的对象则监听这些事件。这种类型的事件处理方式称之为观察者模式。 backbone.js 库在withBackbone.Events中就创建了这样的功能模块。

var SomeModel = Backbone.Model.extend({
  url: "/someurl"
});
var SomeView = Backbone.View.extend({
  initialize: function() {
    this.model.on( "reset", this.render, this );
    this.model.fetch();
  },
  render: function( data ) {
    // do something with data
  }
});
var view = new SomeView({
  model: new SomeModel()
});

ログイン後にコピー

还有其他用于发射事件的混合例子和函数库，例如 jQuery Event Emitter ， EventEmitter ， monologue.js ，以及node.js内建的 EventEmitter 模块。

事件循环是一个回调函数的队列。

一个类似的派发消息的方式称为中介者模式， postal.js 库中用的即是这种方式。在中介者模式，有一个用于所有对象监听和派发事件的中间人。在这种模式下，一个对象不与另外的对象产生直接联系，从而使得对象间都互相分离。

绝不要返回promise到一个公用的API。这不仅关系到了API用户对promises的使用，也使得重构更加困难。不过，内部用途的promises和外部接口的事件的结合，却可以让应用更低耦合且便于测试。

在先前的例子里面，doSomethingCoolWithDirections回调函数在两个geocode函数完成后执行。然后，doSomethingCoolWithDirections才会获得从getRoute接收到的响应，再将其作为消息发送出去。

var doSomethingCoolWithDirections = function( route ) {
  postal.channel( "ui" ).publish( "directions.done", {
    route: route
  });
};

ログイン後にコピー

这允许了应用的其他部分不需要直接引用产生请求的对象，就可以响应异步回调。而在取得命令时，很可能页面的好多区域都需要更新。在一个典型的jQuery Ajax过程中，当接收到的命令变化时，要顺利的回调可能就得做相应的调整了。这可能会使得代码难以维护，但通过使用消息，处理UI多个区域的更新就会简单得多了。

var UI = function() {
  this.channel = postal.channel( "ui" );
  this.channel.subscribe( "directions.done", this.updateDirections ).withContext( this );
};
UI.prototype.updateDirections = function( data ) {
  // The route is available on data.route, now just update the UI
};
app.ui = new UI();

ログイン後にコピー

另外一些基于中介者模式传送消息的库有 amplify, PubSubJS, and radio.js。

结论

JavaScript 使得编写异步代码很容易. 使用 promises, 事件, 或者命名函数来避免“callback hell”. 为获取更多javascript异步编程信息,请点击Async JavaScript: Build More Responsive Apps with Less . 更多的实例托管在github上，地址NetTutsAsyncJS，赶快Clone吧 !