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

异步意味着一个线程在另一个线程之外运行ning。但是您的浏览器不是多线程的，它是单线程的。它将运行按照出现的顺序编码。在继续下一行之前，它将尝试完成您创建的 while loop。 GUI 也连接到该线程。在 while loop ergo 期间，您基本上是在阻止 GUI 页面变得无响应。

对 JavaScript 的添加是为了避免挂起主线程。 Ajax 调用是异步的，因为您不希望 xml 大的 5 mb 文件使浏览器在加载过程中无法使用。此外，原始的 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();
}

Javascript 个异步事件

Javascript asynchronous events

javascript

asynchronous

callback