Vertieftes Verständnis der Synchronisations- und Asynchronmechanismen in der JavaScript-Programmierung

Eine der Stärken von JavaScript ist die Art und Weise, wie es mit asynchronem Code umgeht. Asynchroner Code wird in eine Ereigniswarteschlange gestellt und wartet, bis der gesamte andere Code ausgeführt wird, ohne den Thread zu blockieren. Allerdings kann das Schreiben von asynchronem Code für Anfänger schwierig sein. Und in diesem Artikel werde ich eventuelle Unklarheiten beseitigen.
Asynchronen Code verstehen

Die grundlegendsten asynchronen Funktionen in JavaScript sind setTimeout und setInterval. setTimeout führt die angegebene Funktion nach einer bestimmten Zeitspanne aus. Es akzeptiert eine Rückruffunktion als ersten Parameter und eine Millisekundenzeit als zweiten Parameter. Im Folgenden finden Sie Anwendungsbeispiele:

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

Nach dem Login kopieren

Wie erwartet gibt die Konsole zunächst „a“ und „b“ aus und etwa 500 Millisekunden später sind „c“, „d“ und „e“ zu sehen. Ich verwende „ungefähr“, weil setTimeout eigentlich unvorhersehbar ist. Tatsächlich erwähnt sogar die HTML5-Spezifikation dieses Problem:

„Diese API garantiert nicht, dass das Timing aufgrund der CPU-Auslastung, anderer Aufgaben usw. korrekt abläuft.“

Interessanterweise tritt die Zeitüberschreitung erst auf, wenn die Ausführung des gesamten verbleibenden Codes im selben Segment abgeschlossen ist. Wenn also ein Timeout festgelegt ist und eine Funktion mit langer Laufzeit ausgeführt wird, beginnt das Timeout erst, wenn die Funktion abgeschlossen ist. Tatsächlich werden asynchrone Funktionen wie setTimeout und setInterval in eine Warteschlange namens Event Loop verschoben.

Event Loop ist eine Callback-Funktionswarteschlange. Wenn die asynchrone Funktion ausgeführt wird, wird die Rückruffunktion in diese Warteschlange verschoben. Die JavaScript-Engine beginnt erst mit der Verarbeitung der Ereignisschleife, wenn die Ausführung der asynchronen Funktion abgeschlossen ist. Dies bedeutet, dass der JavaScript-Code kein Multithreading ist, obwohl er sich ähnlich verhält. Die Ereignisschleife ist eine FIFO-Warteschlange (First-In-First-Out), was bedeutet, dass Rückrufe in der Reihenfolge ausgeführt werden, in der sie in die Warteschlange eingereiht werden. Als Entwicklungssprache für Node wurde JavaScript gewählt, da es so einfach ist, solchen Code zu schreiben.

Ajax

Asynchrones Javascript und XML (AJAX) haben die Landschaft der Javascript-Sprache nachhaltig verändert. Plötzlich muss der Browser nicht mehr neu geladen werden, um Webseiten zu aktualisieren. Der Code zur Implementierung von Ajax in verschiedenen Browsern kann langwierig und mühsam sein. Dank der Hilfe von jQuery (und anderen Bibliotheken) können wir jedoch eine Client-Server-Kommunikation auf einfache und elegante Weise erreichen.

Wir können Daten problemlos über die browserübergreifende jQuery-Schnittstelle $.ajax abrufen, können jedoch nicht zeigen, was sich hinter den Kulissen abspielt. Zum Beispiel:

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

Nach dem Login kopieren

Der häufigste Fehler besteht darin, Daten direkt nach dem Aufruf von $.ajax zu verwenden, aber tatsächlich ist es so:

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

Nach dem Login kopieren

Das zugrunde liegende XmlHttpRequest-Objekt initiiert eine Anfrage und legt eine Rückruffunktion fest, um das readystatechnage-Ereignis von XHR zu verarbeiten. Führen Sie dann die Sendemethode von XHR aus. Wenn XHR ausgeführt wird, wird das Ereignis „readystatechange“ ausgelöst, wenn sich sein Attribut „readyState“ ändert, und die Rückruffunktion löst die Ausführung erst aus, wenn XHR keine Antwort vom Remote-Server empfängt.

Umgang mit asynchronem Code

Asynchrone Programmierung kann leicht in das geraten, was wir oft als „Callback-Hölle“ bezeichnen. Da tatsächlich fast alle asynchronen Funktionen in JS Rückrufe verwenden, sind das Ergebnis der kontinuierlichen Ausführung mehrerer asynchroner Funktionen Schichten verschachtelter Rückruffunktionen und der daraus resultierende komplexe Code.

Viele Funktionen in node.js sind auch asynchron. Daher ist folgender Code grundsätzlich sehr verbreitet:

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

Nach dem Login kopieren

Der folgende Client-Code ist ebenfalls üblich:

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

Nach dem Login kopieren

Verschachtelte Rückrufe können wirklich unangenehm werden, aber es gibt mehrere Lösungen für diesen Codierungsstil.

Verschachtelte Rückrufe können leicht einen „schlechten Geruch“ in den Code bringen, aber Sie können die folgenden Stile verwenden, um zu versuchen, dieses Problem zu lösen

Das Problem liegt nicht in der Sprache selbst, sondern in der Art und Weise, wie Programmierer die Sprache verwenden – Async Javascript.

Es gibt keine schlechten Sprachen, nur schlechte Programmierer – Asynchrones JavaScript

Benannte Funktion

Eine praktische Lösung zum Löschen verschachtelter Rückrufe besteht darin, einfach mehr als zwei Verschachtelungsebenen zu vermeiden. Übergeben Sie eine benannte Funktion als Rückrufparameter, anstatt eine anonyme Funktion zu übergeben:

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

Nach dem Login kopieren

Darüber hinaus kann uns die async.js-Bibliothek dabei helfen, mehrere Ajax-Anfragen/-Antworten zu verarbeiten:

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

Nach dem Login kopieren

这段代码执行两个异步函数，每个函数都接收一个名为"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 );
  });

Nach dem Login kopieren

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

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

Nach dem Login kopieren

还有其他用于发射事件的混合例子和函数库，例如 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
  });
};

Nach dem Login kopieren

这允许了应用的其他部分不需要直接引用产生请求的对象，就可以响应异步回调。而在取得命令时，很可能页面的好多区域都需要更新。在一个典型的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();

Nach dem Login kopieren

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

结论

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