Javascript異步事件

Question

我正在嘗試理解回調，所以我創建了一個測試代碼來檢查異步行為。

function wait() {
while (new Date() < 2000 + new Date().getTime()){}
console.log("end");
}

console.log("start");
wait();

function clicke(){
console.log("click!")
}

document.addEventListener('click', clicke);

因此，我希望在我執行這些操作時將日志設置為start然后clicks ，並在2秒后end 。 但問題是所有事件通知都是在start和end打印出來的。 我究竟做錯了什么？

Answer 1

JavaScript是單線程的，while循環阻塞線程。 在while循環中忙碌等待兩秒鍾后，它會處理您正在創建的事件。 要在兩秒內記錄消息，請執行以下操作：

setTimeout(function(){console.log("message")}, 2000);

請參閱https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

Answer 2

異步意味着胎面在另一個螺紋之外運行。 但是你的瀏覽器不是多線程的，它是單線程的。 它將按照呈現的順序運行代碼。 它會嘗試完成你創建的while loop ，然后再進入下一行。 GUI也被掛鈎到該線程中。 您在過程中基本上阻斷GUI while loop ERGO的頁面不響應。

增加了JavaScript以避免掛起主線程。 Ajax調用是異步的，因為您不希望大小為5 MB的 xml文件在加載過程中使瀏覽器無法使用。 原始的setTimeout和setInterval允許異步操作。 它們不會阻塞線程，但會拋棄它。

正在開發和實現新技術，例如也允許異步調用的promises ，但是您可以將函數鏈接到異步對象。

使用示例進行異步處理：

 function start() { document.body.innerHTML += "<p>Started, you have ten seconds to click as much as you can.</p> "; var callback = function(){alert("Game Over")}; document.addEventListener('click', clicke); setTimeout('end('+callback+')', 10000); //send the callback to end the function end. } start(); var clicked = 0; function clicke(){ document.body.innerHTML += "<p>Clicked: "+ (clicked++) +"</p> " } function end(callback) { document.body.innerHTML += "<p>Ended, you can no longer click.</p> "; document.removeEventListener('click', clicke); callback(); }