Làm cách nào để tạo chức năng Không đồng bộ trong Javascript?

Kiểm tra mã này :

<a href="#" id="link">Link</a>
<span>Moving</span>

$('#link').click(function () {
    console.log("Enter");
    $('#link').animate({ width: 200 }, 2000, function() {
         console.log("finished");            
    });    
    console.log("Exit");    
});

Như bạn có thể thấy trong bảng điều khiển, chức năng "animate" không đồng bộ và nó "rẽ nhánh" là dòng chảy của mã khối xử lý sự kiện. Trong thực tế :

$('#link').click(function () {
    console.log("Enter");
    asyncFunct();
    console.log("Exit");    
});

function asyncFunct() {
    console.log("finished");
}

theo dòng chảy của mã khối!

Nếu tôi muốn tạo function asyncFunct() { }hành vi của mình với hành vi này, làm thế nào tôi có thể làm điều đó với javascript / jquery? Tôi nghĩ rằng đó là một chiến lược mà không cần dùng setTimeout()

Bạn không thể thực hiện một chức năng không đồng bộ tùy chỉnh thực sự. Cuối cùng, bạn sẽ phải tận dụng một công nghệ được cung cấp nguyên bản, chẳng hạn như:

• setInterval
• setTimeout
• requestAnimationFrame
• XMLHttpRequest
• WebSocket
• Worker
• Một số API HTML5 như API tệp, API cơ sở dữ liệu web
• Công nghệ hỗ trợ onload
• ... nhiều người khác

Trong thực tế, đối với hoạt hình jQuery sử dụng setInterval .

Bạn có thể sử dụng một bộ đếm thời gian:

setTimeout( yourFn, 0 );

(nơi yourFntham chiếu đến chức năng của bạn)

hoặc, với Lodash :

_.defer( yourFn );

Trì hoãn việc gọi funccho đến khi ngăn xếp cuộc gọi hiện tại bị xóa. Bất kỳ đối số bổ sung nào được cung cấp funckhi nó được gọi.

Ở đây bạn có giải pháp đơn giản (viết khác về nó) http: //www.ben Meat.com/2012/05/calling-javascript-feft.html

Và ở đây bạn có giải pháp sẵn sàng ở trên:

function async(your_function, callback) {
    setTimeout(function() {
        your_function();
        if (callback) {callback();}
    }, 0);
}

KIỂM TRA 1 ( có thể xuất '1 x 2 3' hoặc '1 2 x 3' hoặc '1 2 3 x' ):

console.log(1);
async(function() {console.log('x')}, null);
console.log(2);
console.log(3);

KIỂM TRA 2 ( sẽ luôn xuất 'x 1' ):

async(function() {console.log('x');}, function() {console.log(1);});

Hàm này được thực thi với thời gian chờ 0 - nó sẽ mô phỏng tác vụ không đồng bộ

Đây là một chức năng có chức năng khác và đưa ra một phiên bản chạy không đồng bộ.

var async = function (func) {
  return function () {
    var args = arguments;
    setTimeout(function () {
      func.apply(this, args);
    }, 0);
  };
};

Nó được sử dụng như một cách đơn giản để tạo chức năng async:

var anyncFunction = async(function (callback) {
    doSomething();
    callback();
});

Điều này khác với câu trả lời của @ fider vì bản thân hàm có cấu trúc riêng (không có cuộc gọi lại được thêm vào, nó đã có trong hàm) và cũng vì nó tạo ra một chức năng mới có thể được sử dụng.

Chỉnh sửa: Tôi hoàn toàn hiểu sai câu hỏi. Trong trình duyệt, tôi sẽ sử dụng setTimeout. Nếu điều quan trọng là nó chạy trong một luồng khác, tôi sẽ sử dụng Web Worker .

Tuy muộn, nhưng để hiển thị một giải pháp dễ dàng sử dụng promisessau khi giới thiệu trong ES6 , nó xử lý các cuộc gọi không đồng bộ dễ dàng hơn nhiều:

Bạn đặt mã không đồng bộ trong một lời hứa mới:

var asyncFunct = new Promise(function(resolve, reject) {
    $('#link').animate({ width: 200 }, 2000, function() {
        console.log("finished");                
        resolve();
    });             
});

Lưu ý để đặt resolve()khi cuộc gọi async kết thúc.
Sau đó, bạn thêm mã mà bạn muốn chạy sau khi cuộc gọi async kết thúc bên trong .then()lời hứa:

asyncFunct.then((result) => {
    console.log("Exit");    
});

Đây là một đoạn của nó:

$('#link').click(function () {
    console.log("Enter");
    var asyncFunct = new Promise(function(resolve, reject) {
        $('#link').animate({ width: 200 }, 2000, function() {
            console.log("finished");            	
            resolve();
        }); 			
    });
    asyncFunct.then((result) => {
        console.log("Exit");    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="link">Link</a>
<span>Moving</span>

hoặc JSFiddle

Trang này hướng dẫn bạn qua các điều cơ bản để tạo chức năng javascript không đồng bộ.

Kể từ ES2017, các hàm javacript không đồng bộ dễ viết hơn nhiều. Bạn cũng nên đọc thêm về Lời hứa .

Nếu bạn muốn sử dụng Tham số và điều chỉnh số lượng hàm async tối đa, bạn có thể sử dụng một công cụ async đơn giản mà tôi đã xây dựng:

var BackgroundWorker = function(maxTasks) {
    this.maxTasks = maxTasks || 100;
    this.runningTasks = 0;
    this.taskQueue = [];
};

/* runs an async task */
BackgroundWorker.prototype.runTask = function(task, delay, params) {
    var self = this;
    if(self.runningTasks >= self.maxTasks) {
        self.taskQueue.push({ task: task, delay: delay, params: params});
    } else {
        self.runningTasks += 1;
        var runnable = function(params) {
            try {
                task(params);
            } catch(err) {
                console.log(err);
            }
            self.taskCompleted();
        }
        // this approach uses current standards:
        setTimeout(runnable, delay, params);
    }
}

BackgroundWorker.prototype.taskCompleted = function() {
    this.runningTasks -= 1;

    // are any tasks waiting in queue?
    if(this.taskQueue.length > 0) {
        // it seems so! let's run it x)
        var taskInfo = this.taskQueue.splice(0, 1)[0];
        this.runTask(taskInfo.task, taskInfo.delay, taskInfo.params);
    }
}

Bạn có thể sử dụng nó như thế này:

var myFunction = function() {
 ...
}
var myFunctionB = function() {
 ...
}
var myParams = { name: "John" };

var bgworker = new BackgroundWorker();
bgworker.runTask(myFunction, 0, myParams);
bgworker.runTask(myFunctionB, 0, null);

Function.prototype.applyAsync = function(params, cb){
      var function_context = this;
      setTimeout(function(){
          var val = function_context.apply(undefined, params); 
          if(cb) cb(val);
      }, 0);
}

// usage
var double = function(n){return 2*n;};
var display = function(){console.log(arguments); return undefined;};
double.applyAsync([3], display);

Mặc dù về cơ bản không khác biệt so với các giải pháp khác, tôi nghĩ rằng giải pháp của tôi thực hiện thêm một số điều hay:

• nó cho phép các tham số cho các chức năng
• nó chuyển đầu ra của hàm cho hàm gọi lại
• nó được thêm vào để Function.prototypecho phép một cách tốt hơn để gọi nó

Ngoài ra, sự tương tự với chức năng tích Function.prototype.applyhợp có vẻ phù hợp với tôi.

Bên cạnh câu trả lời tuyệt vời của @pimvdb và chỉ trong trường hợp bạn thắc mắc, async.js cũng không cung cấp các hàm thực sự không đồng bộ. Đây là một phiên bản rút gọn (rất) của phương thức chính của thư viện:

function asyncify(func) { // signature: func(array)
    return function (array, callback) {
        var result;
        try {
            result = func.apply(this, array);
        } catch (e) {
            return callback(e);
        }
        /* code ommited in case func returns a promise */
        callback(null, result);
    };
}

Vì vậy, hàm bảo vệ khỏi các lỗi và duyên dáng đưa nó vào hàm gọi lại để xử lý, nhưng mã này đồng bộ như bất kỳ hàm JS nào khác.

Thật không may, JavaScript không cung cấp chức năng không đồng bộ. Nó chỉ hoạt động trong một chủ đề duy nhất. Nhưng hầu hết các trình duyệt hiện đại cung cấp Workers , đó là các tập lệnh thứ hai được thực thi trong nền và có thể trả về kết quả. Vì vậy, tôi đã đạt được một giải pháp mà tôi nghĩ rằng nó hữu ích khi chạy không đồng bộ một chức năng, tạo ra một công nhân cho mỗi cuộc gọi không đồng bộ.

Mã dưới đây chứa chức năng async để gọi trong nền.

Function.prototype.async = function(callback) {
    let blob = new Blob([ "self.addEventListener('message', function(e) { self.postMessage({ result: (" + this + ").apply(null, e.data) }); }, false);" ], { type: "text/javascript" });
    let worker = new Worker(window.URL.createObjectURL(blob));
    worker.addEventListener("message", function(e) {
        this(e.data.result);
    }.bind(callback), false);
    return function() {
        this.postMessage(Array.from(arguments));
    }.bind(worker);
};

Đây là một ví dụ cho việc sử dụng:

(function(x) {
    for (let i = 0; i < 999999999; i++) {}
        return x * 2;
}).async(function(result) {
    alert(result);
})(10);

Điều này thực thi một hàm lặp đi lặp lại forvới một số lượng lớn để dành thời gian như là minh chứng cho sự không điển hình, và sau đó nhận được gấp đôi số đã qua. Các asyncphương pháp cung cấp một functionmà gọi hàm truy nã ở chế độ nền, và trong đó được cung cấp như tham số của asynccallbacks sự returntrong tham số độc đáo của nó. Vì vậy, trong chức năng gọi lại tôi alertkết quả.

MDN có một ví dụ điển hình về việc sử dụng setTimeout bảo toàn "cái này".

Giống như sau:

function doSomething() {
    // use 'this' to handle the selected element here
}

$(".someSelector").each(function() {
    setTimeout(doSomething.bind(this), 0);
});