Điều này làm gì.async() làm trong JavaScript

Question

Giữ trên nhìn thấy mô hình này trong mã, nhưng không thể tìm thấy bất kỳ tham chiếu đến nó trong google hoặc SO, lạ. Ai đó có thể chỉ cho tôi để tham khảo cho this.async() chức năng?

var done = this.async(); 
    // ... 
    $.get(path, function(contents) { // or some other function with callback 
    // ... 
    done(JST[path] = tmpl); 
    }) 

Answer 1

Đó là cách khắc phục sự cố this thoát bên trong gọi lại. Nếu không có tham chiếu bổ sung này, mã sẽ trông giống như sau:

$.get(path, function(contents) { // or some other function with callback 
    //Wrong! `this` might no longer point to your object 
    this.done(JST[path] = tmpl); 
}) 

Thật không may! this bên trong phản hồi gọi lại không giống như this bên ngoài của nó. Trong thực tế nó có thể là bất cứ điều gì, tùy thuộc vào những gì $.get (gọi điện thoại sử dụng lại) quyết định nó được. Hầu hết mọi người sử dụng tham chiếu bổ sung có tên that cho cùng một mục đích:

var that = this; 
// ... 
$.get(path, function(contents) { // or some other function with callback 
    // ... 
    that.async(JST[path] = tmpl); 
}) 

Mẫu này cũng có vẻ hợp lý và dễ đọc.

Oh, và nếu bạn tò mò về cú pháp này:

done(JST[path] = tmpl) 

Đây là một bài tập sử dụng như một biểu thức. Giá trị chuyển nhượng là phía bên tay phải, do đó, mã này tương đương với:

JST[path] = tmpl; 
done(tmpl); 

Answer 2

var done = this.async() và done(blah) là một thủ thuật thông minh để trả lại một giá trị lấy từ không đồng bộ cuộc gọi (ví dụ $.get) trong vòng một chức năng đồng bộ.

Chúng ta hãy xem một ví dụ:

var getText = function() { 
    return "hello"; 
}; 
var text = getText(); 

Đó là một chức năng cuộc gọi khá đơn giản như vậy không có câu đố ở đây. Tuy nhiên, điều gì sẽ xảy ra nếu bạn cần tìm nạp văn bản một cách không đồng bộ trong hàm getText()?

var getText = function() { 
    return $.get('<some-url>', function(text) { 
    return text; 
    }); // ?????? 
}; 

gọi tới getText() không trả lại văn bản bạn muốn nhận. Nó trả về đối tượng lời hứa của jquery.

Vậy làm cách nào để chúng tôi thực hiện getText() trả về văn bản nhận được từ cuộc gọi $.get()?

var getText = function() { 
    var done = this.async(); 
    $.get('<some-url>', function(text) { 
    done(text); 
    }); 
}; 
var text = getText(); // you get the expected text 

Magic, phải không?

Tôi không biết hoạt động bên trong của cuộc gọi this.async(). Tôi không biết nếu có một thư viện cung cấp chức năng đó, nhưng bạn có thể thấy rằng Backbone.LayoutManager sử dụng thủ thuật này https://github.com/tbranyen/backbone.layoutmanager/blob/master/backbone.layoutmanager.js (tìm kiếm this.async).

Ngoài ra, Tim Branyen (tác giả của bố cục xương sống) một thời gian ngắn nói về nó trong video hướng dẫn của mình (http://vimeo.com/32765088 khoảng 14:00 - 15:00). Trong video, Tim nói Ben Alman đã nghĩ ra điều đó. Hãy xem điều này cũng như https://github.com/cowboy/javascript-sync-async-foreach

Tôi nghĩ rằng đó là một mẹo khá gọn gàng để trộn các chức năng đồng bộ hóa và đồng bộ hóa.

Chúc mừng,