Javascript:非阻塞回调(另一次)

Question

我不是一个经验丰富的开发人员，过去几天我一直在尝试理解有关Javascript的一些基本概念。单线程，阻塞与非阻塞和回调。我读了很多书，但我还是很困惑。

我的理解是，在一个简单的JS代码中，所有的语句都是在一个线程中按顺序执行的。在更复杂的情况下，如果存在长时间运行的语句（数据库调用、网络交互等），这可能是一个巨大的问题。程序执行（下一条语句）被BLOCKED，直到当前（长时间运行）语句完成。解决方案是实现一种异步模式，在这种模式中，长时间运行的语句在后台执行（我在这里可能大错特错。

从这里和那里复制和粘贴代码我写了一段琐碎的代码，其中我有一个回调函数

// function with callback    
function doSomething(callback) {
    callback();
}
// callback function implementation
function doSomethingElse() {
    document.write("<p>Second element in the page</p>");
}
doSomething(doSomethingElse);   
document.write("<p>First element in the page</p>");

这段代码的结果实际上是我在开始阅读关于非阻塞和回调（顺序代码执行）之前所期望的：-第二个元素-第一元素

所以我的问题是，将我的代码转换为异步非阻塞代码的神奇精灵尘埃是什么？

干杯，Giovanni

Answer 1

将我的代码转换为异步非阻塞代码的神奇精灵尘埃是什么？

通常，大多数长时间运行的操作都将由API处理，这些API处理异步操作的级别低于JavaScript（用于发出HTTP请求的XMLHttpRequest就是一个主要示例）。

如果您需要自己实现一个长期运行的函数（也许您想在客户端上进行一些繁重的数字运算），那么您可以使用Web Workers。

var myWorker = new Worker("find_prime_numbers.js");
myWorker.onmessage = function(e) {
  console.log('Next prime number is ' + e.data);
}

并且在find_prime_numbers.js:中

// Calculate some primes
postMessage(my_prime_number);

Answer 2

您已经使用了回调，但这并不意味着这个调用是异步的。

它同步运行doSomething，后者运行callback并输出"第二元素"。

如果您有一个异步调用——AJAX调用、文件系统访问或简单的setTimeout:，那么它将是异步的

function doSomething(callback) {
  setTimeout(callback, 1000);
}
// callback function implementation
function doSomethingElse() {
  document.write("<p>Second element in the page</p>");
}
doSomething(doSomethingElse);   
document.write("<p>First element in the page</p>");

现在，它执行以下操作：运行doSomething，然后运行setTimeout和doSomethingElse。同时，setTimeout异步等待1秒并调用函数。

在其他情况下，它可以是任何其他异步操作，这需要时间才能完成。