Warum setTimeout-Code blockiert?

Question

function test(){ 
    setTimeout(function(){ 
    var now=new Date(); 
    while((new Date()).getTime() < now.getTime()+5000){ } 
    console.log('p') 
    }, 0); 
} 

test(); 
test(); //it takes 10 seconds,the second test function runs after the first finished. 

kann mir jemand erklären, wie es funktioniert?

Answer 1

Dies passiert, weil, wenn Sie eine function innerhalb von setTimeout übergeben und es aufrufen, wird die übergebene Funktion in die callBack Warteschlange basierend auf der gelieferten Verzögerung in Millisekunden geschoben. Die Funktionen innerhalb der CallBack-Warteschlange werden nacheinander in der Reihenfolge ausgeführt, in der sie gedrängt wurden. In diesem Fall blockieren Sie den Codefluss function, der in der Warteschlange callBack vorhanden ist, indem Sie eine while-Schleife ausführen. Daher dauert der zweite Aufruf von test 10 Sekunden zur Ausführung.

Hinweis: Die Rückrufwarteschlange startet ihre Ausführung, wenn im Aufrufstapel nichts ausgeführt wird.

Am besten lesen Sie hierzu, Event Loop.

Answer 2

Wenn Sie eine nicht-blockierende Implementierung haben Sie Ihre synchrone while Schleife mit asynchroner Rekursion ersetzen:

function test(x){ 
 
    setTimeout(function loop(now) { 
 
    (new Date()).getTime() < now.getTime()+2000 
 
    ? setTimeout(loop, 0, now) 
 
    : console.log('p', x); 
 
    },0, new Date()) 
 
} 
 

 
test(1); 
 
test(2);