Bagaimana saya bisa membuat fungsi Asynchronous di Javascript?

Lihat kode ini :

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

Seperti yang Anda lihat di konsol, fungsi "animate" asinkron, dan "fork" adalah alur kode blok pengendali event. Faktanya :

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

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

ikuti aliran kode blok!

Jika saya ingin membuat function asyncFunct() { }perilaku saya dengan ini, bagaimana saya bisa melakukannya dengan javascript / jquery? Saya pikir ada strategi tanpa menggunakan setTimeout()

Anda tidak dapat membuat fungsi asinkron yang benar-benar tersuai. Anda akhirnya harus memanfaatkan teknologi yang disediakan secara asli, seperti:

• setInterval
• setTimeout
• requestAnimationFrame
• XMLHttpRequest
• WebSocket
• Worker
• Beberapa HTML5 API seperti File API, Web Database API
• Teknologi yang mendukung onload
• ... banyak lainnya

Bahkan, untuk animasi jQuery menggunakan setInterval .

Anda dapat menggunakan timer:

setTimeout( yourFn, 0 );

(di mana yourFnreferensi ke fungsi Anda)

atau, dengan Lodash :

_.defer( yourFn );

Defers memohon funcsampai tumpukan panggilan saat ini telah dihapus. Argumen tambahan diberikan funcketika diminta.

di sini Anda memiliki solusi sederhana (tulis lain tentang itu) http://www.benlesh.com/2012/05/calling-javascript-function.html

Dan di sini Anda memiliki solusi siap di atas:

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

TEST 1 ( dapat menampilkan '1 x 2 3' atau '1 2 x 3' atau '1 2 3 x' ):

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

TEST 2 ( akan selalu menampilkan 'x 1' ):

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

Fungsi ini dijalankan dengan batas waktu 0 - ini akan mensimulasikan tugas asinkron

Berikut adalah fungsi yang mengambil fungsi lain dan menampilkan versi yang menjalankan async.

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

Ini digunakan sebagai cara sederhana untuk membuat fungsi async:

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

Ini berbeda dari jawaban @ fider karena fungsi itu sendiri memiliki struktur sendiri (tidak ada panggilan balik ditambahkan, itu sudah ada dalam fungsi) dan juga karena ia menciptakan fungsi baru yang dapat digunakan.

Sunting: Saya benar-benar salah paham pertanyaannya. Di browser, saya akan menggunakan setTimeout. Jika penting menjalankannya di utas lain, saya akan menggunakan Pekerja Web .

Terlambat, tetapi untuk menunjukkan solusi yang mudah digunakan promisessetelah diperkenalkan di ES6 , ini menangani panggilan asinkron jauh lebih mudah:

Anda menetapkan kode asinkron dalam janji baru:

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

Catatan untuk mengatur resolve()kapan panggilan async selesai.
Kemudian Anda menambahkan kode yang ingin Anda jalankan setelah panggilan async selesai di .then()dalam janji:

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

Berikut ini cuplikannya:

$('#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>

atau JSFiddle

Halaman ini menuntun Anda melalui dasar-dasar membuat fungsi javascript async.

Sejak ES2017, fungsi javacript asinkron jauh lebih mudah untuk ditulis. Anda juga harus membaca lebih lanjut tentang Janji .

Jika Anda ingin menggunakan Parameter dan mengatur jumlah fungsi async maksimum, Anda bisa menggunakan pekerja async sederhana yang saya buat:

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

Anda bisa menggunakannya seperti ini:

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

Meskipun secara fundamental tidak berbeda dari solusi lain, saya pikir solusi saya melakukan beberapa hal baik tambahan:

• memungkinkan untuk parameter ke fungsi
• itu melewati output dari fungsi ke panggilan balik
• itu ditambahkan untuk Function.prototypememungkinkan cara yang lebih baik untuk menyebutnya

Juga, kesamaan dengan fungsi Function.prototype.applybawaan sepertinya cocok untuk saya.

Di samping jawaban hebat oleh @pimvdb, dan untuk berjaga-jaga jika Anda bertanya-tanya, async.js juga tidak menawarkan fungsi yang benar-benar tidak sinkron. Berikut ini adalah versi (sangat) dari metode utama perpustakaan:

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

Jadi fungsi melindungi dari kesalahan dan dengan anggun menyerahkannya ke callback untuk ditangani, tetapi kode ini sama sinkronnya dengan fungsi JS lainnya.

Sayangnya, JavaScript tidak menyediakan fungsionalitas async. Ini hanya berfungsi dalam satu utas tunggal. Tapi sebagian besar browser modern memberikan Workers , yang script kedua yang dijalankan di latar belakang dan dapat kembali hasilnya. Jadi, saya mencapai solusi yang menurut saya berguna untuk menjalankan fungsi secara tidak sinkron, yang menciptakan pekerja untuk setiap panggilan async.

Kode di bawah ini berisi fungsi async untuk memanggil di latar belakang.

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

Ini adalah contoh untuk penggunaan:

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

Ini mengeksekusi fungsi yang iterasi a fordengan jumlah yang sangat besar untuk mengambil waktu sebagai demonstrasi asinkronisitas, dan kemudian mendapatkan dua kali lipat dari angka yang dilewati. The asyncMetode menyediakan functionyang memanggil fungsi yang diinginkan di latar belakang, dan di mana yang disediakan sebagai parameter asynccallback yang returndalam parameter yang unik. Jadi dalam fungsi callback saya alerthasilnya.

MDN memiliki contoh yang baik tentang penggunaan setTimeout yang mempertahankan "ini".

Seperti yang berikut ini:

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

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