Pemahaman mendalam tentang mekanisme penyegerakan dan tak segerak dalam pengaturcaraan JavaScript

Salah satu kekuatan JavaScript ialah cara ia mengendalikan kod tak segerak. Kod tak segerak dimasukkan ke dalam baris gilir acara dan menunggu sehingga semua kod lain dilaksanakan tanpa menyekat benang. Walau bagaimanapun, menulis kod tak segerak boleh menjadi sukar untuk pemula. Dan dalam artikel ini, saya akan menjelaskan sebarang kekeliruan yang mungkin anda alami.
Memahami kod tak segerak

Fungsi tak segerak paling asas dalam JavaScript ialah setTimeout dan setInterval. setTimeout akan melaksanakan fungsi yang diberikan selepas tempoh masa tertentu. Ia menerima fungsi panggil balik sebagai parameter pertama dan masa milisaat sebagai parameter kedua. Berikut ialah contoh penggunaan:

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

Salin selepas log masuk

Seperti yang dijangkakan, konsol pertama mengeluarkan "a" dan "b", dan kira-kira 500 milisaat kemudian, "c", "d" dan "e" dilihat. Saya menggunakan "anggaran" kerana setTimeout sebenarnya tidak dapat diramalkan. Malah, malah spesifikasi HTML5 menyebut isu ini:

"API ini tidak menjamin bahawa pemasaan akan berjalan dengan tepat seperti yang dijangkakan Kelewatan disebabkan oleh beban CPU, tugas lain, dsb. adalah dijangkakan."

Menariknya, tamat masa tidak berlaku sehingga semua kod yang tinggal dalam segmen yang sama selesai dilaksanakan. Jadi jika tamat masa ditetapkan dan fungsi jangka masa panjang dilaksanakan, tamat masa tidak akan bermula sehingga fungsi selesai. Malah, fungsi tak segerak, seperti setTimeout dan setInterval, ditolak ke dalam baris gilir yang dipanggil Event Loop.

Gelung Peristiwa ialah baris gilir fungsi panggil balik. Apabila fungsi tak segerak dilaksanakan, fungsi panggil balik akan ditolak ke dalam baris gilir ini. Enjin JavaScript tidak akan mula memproses gelung peristiwa sehingga pelaksanaan fungsi tak segerak selesai. Ini bermakna kod JavaScript bukan berbilang benang, walaupun ia berkelakuan serupa. Gelung peristiwa ialah baris gilir pertama masuk dahulu (FIFO), yang bermaksud panggilan balik dilaksanakan mengikut susunan ia dimasukkan ke dalam baris gilir. JavaScript telah dipilih sebagai bahasa pembangunan untuk Node kerana betapa mudahnya menulis kod tersebut.

Ajax

Asynchronous Javascript dan XML (AJAX) telah menukar landskap bahasa Javascript secara kekal. Tiba-tiba, penyemak imbas tidak lagi perlu memuat semula untuk mengemas kini halaman web. Kod untuk melaksanakan Ajax dalam penyemak imbas yang berbeza boleh menjadi panjang dan membosankan, bagaimanapun, terima kasih kepada bantuan jQuery (dan perpustakaan lain), kami boleh mencapai komunikasi pelanggan-pelayan dengan cara yang mudah dan elegan.

Kami boleh mendapatkan semula data dengan mudah menggunakan antara muka penyemak imbas jQuery $.ajax, namun kami tidak dapat menunjukkan apa yang berlaku di sebalik tabir. Contohnya:

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

Salin selepas log masuk

Kesilapan yang paling biasa ialah menggunakan data serta-merta selepas memanggil $.ajax, tetapi sebenarnya ia adalah seperti ini:

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

Salin selepas log masuk

Objek XmlHttpRequest yang mendasari memulakan permintaan dan menetapkan fungsi panggil balik untuk mengendalikan acara readystatechnage XHR. Kemudian laksanakan kaedah penghantaran XHR. Apabila XHR dijalankan, acara readystatechange akan dicetuskan apabila atribut readyState berubah, dan fungsi panggil balik akan mencetuskan pelaksanaan hanya apabila XHR tamat menerima respons daripada pelayan jauh.

Mengendalikan kod tak segerak

Pengaturcaraan tak segerak boleh jatuh dengan mudah ke dalam apa yang sering kita panggil "neraka panggilan balik". Kerana sebenarnya hampir semua fungsi tak segerak dalam JS menggunakan panggilan balik, hasil daripada melaksanakan beberapa fungsi tak segerak secara berterusan ialah lapisan fungsi panggil balik bersarang dan kod kompleks yang terhasil.

Banyak fungsi dalam node.js juga tidak segerak. Oleh itu kod berikut pada asasnya sangat biasa:

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

Salin selepas log masuk

Kod pelanggan berikut juga biasa:

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

Salin selepas log masuk

Panggil balik bersarang boleh menjadi sangat buruk, tetapi terdapat beberapa penyelesaian untuk gaya pengekodan ini.

Panggil balik bersarang boleh membawa "bau busuk" dengan mudah dalam kod, tetapi anda boleh menggunakan gaya berikut untuk cuba menyelesaikan masalah ini

Tiada bahasa yang buruk, hanya pengaturcara yang buruk - JavaScript Asynchronous

Fungsi bernama

Penyelesaian yang mudah untuk mengosongkan panggilan balik bersarang adalah dengan hanya mengelakkan lebih daripada dua tahap bersarang. Lulus fungsi bernama sebagai parameter panggil balik dan bukannya menghantar fungsi tanpa nama:

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

Salin selepas log masuk

Selain itu, pustaka async.js boleh membantu kami mengendalikan berbilang permintaan/tindak balas Ajax Contohnya:

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

Salin selepas log masuk

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

结论

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