Jaki jest prosty przykład asynchronicznej funkcji javascript?

Question

Naprawdę walczę tutaj, aby poradzić sobie z pisaniem asynchronicznego JavaScriptu. Czy mógłbyś podać przykład prostego funkcji JavaScript, która jest asynchroniczny napisany w czystym JavaScript (a nie przy użyciu node.js lub JQuery)

Answer 1

Sam JavaScript jest synchroniczny i jednowątkowy. Nie możesz napisać funkcji asynchronicznej; zwykły JS nie ma interfejsu czasowego API. Nie będzie efektów ubocznych z równoległych wątków.

Co można zrobić, to korzystać z niektórych funkcji API dostarczanych przez danego środowiska (node.js przeglądarka internetowa), które pozwalają na planowanie zadań za pomocą asynchronicznych - limity czasu, AJAX, FileAPI, requestAnimationFrame, nextTick, WebWorkers, wydarzenia dom, cokolwiek.

Przykładem korzystania setTimeout (dostarczonego przez HTML Timing API):

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

---

Update: Od ES6 są obietnice jako asynchroniczny prymitywny wbudowane w prostym JavaScript, więc można zrobić

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

Jednak same w sobie nie są pomocne, gdy nie ma na co czekać (np. Limitu czasu). I nic nie zmieniają również w modelu wątków, wszystkie wykonania są wykonywane od początku do końca bez żadnych zakłóceń.

Answer 2

To asynchroniczny:

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

console.log('2'); 

2 będą zapisywane do konsoli before 1. Ponieważ setTimeout jest asynchroniczne.

Answer 3

Oto jeden bardzo prosty przykład:

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

Można oczekiwać te console.log() wzywa pokazać 0, 1, 2 itd., Tak jak w tym fragmencie:

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

Ale w rzeczywistości tylko 10 s będzie wydrukowane! Dlatego, że funkcje przeszedł do setTimeout funkcji (jak jego „zwrotnego” argument) zostanie wywołany pofor pętla zostanie zakończona - czyli po i wartość jest ustawiona na 10.

Yet należy rozumieć jedno: wszyscy JavaScript w przeglądarce działa na jednym wątku; Zdarzenia asynchroniczne (takie jak kliknięcia myszy i liczniki czasu) są uruchamiane tylko wtedy, gdy w kolejce wykonawczej jest otwór. Oto a brilliant article napisane przez Johna Resiga na ten temat.