Was ist ein einfaches Beispiel für eine asynchrone JavaScript-Funktion?

Question

Ich habe hier wirklich Probleme, asynchrones JavaScript zu schreiben. Könnten Sie bitte ein Beispiel für eine einfache JavaScript-Funktion zur Verfügung stellen, die in einfachen JavaScript geschrieben asynchron ist (und nicht Node.js oder JQuery verwenden)

Answer 1

JavaScript selbst ist synchron und single-threaded. Sie können keine asynchrone Funktion schreiben; plain JS hat keine Timing-API. Es wird keine Nebenwirkungen von parallelen Threads geben.

Was können Sie tun, ist es, einige APIs, die von Ihrer Umgebung (Node.js, Web-Browser) verwendet werden, solange können Sie asynchrone Aufgaben planen - mit Timeouts, Ajax, FileAPI, requestAnimationFrame, nextTick, Webworkers, DOM-Ereignisse, was auch immer.

Ein Beispiel setTimeout mit (von der HTML Timing API zur Verfügung gestellt):

window.setTimeout(function() { 
    console.log("World"); 
}, 1000); 
console.log("Hello"); 

---

Update: Seit ES6 gibt es verspricht als asynchrone primitive in einfache JavaScript gebaut, so dass Sie

tun können

Promise.resolve("World").then(console.log); // then callbacks are always asynchronous 
console.log("Hello"); 

Aber sie sind nicht wirklich hilfreich, wenn es nichts gibt, auf das man warten könnte (wie eine Zeitüberschreitung). Und sie ändern auch nichts an dem Threading-Modell. Die gesamte Ausführung wird vollständig ausgeführt, ohne dass irgendwelche Ereignisse in der Mitte stören.

Answer 2

Dies ist asynchron:

setTimeout(function(){ 
    console.log('1'); 
}, 2000); 

console.log('2'); 

2 wird auf die Konsole geschrieben werden vor 1. Weil setTimeout asynchron ist.

Answer 3

Hier ist ein sehr einfaches Beispiel:

for (var i = 0; i < 10; i++) { 
    window.setTimeout(function() { 
    console.log(i); 
    }, 2000); 
} 

Sie könnten diese erwarten console.log() Sie 0, 1, 2 usw. zu zeigen, ruft, wie in diesem Code-Schnipsel:

for (var i = 0; i < 10; i++) { 
    console.log(i); 
} 

Aber in der Tat nur 10 s wird gedruckt! Der Grund, dass Funktionen in setTimeout Funktion übergeben (als "Callback-Argument) wird aufgerufen werden, nachdemfor Schleife abgeschlossen ist - dh nach i Wert bis 10.

gesetzt Doch sollten Sie eine Sache verstanden: alle JavaScript in einem Browser wird auf einem einzelnen Thread ausgeführt; asynchrone Ereignisse (wie Mausklicks und Timer) werden nur ausgeführt, wenn in der Ausführungswarteschlange eine Öffnung stattgefunden hat. Hier ist a brilliant article geschrieben von John Resig zu diesem Thema.