关于javascript:什么是-JavaScript-里的异步操作和回调函数

JavaScript 宿主环境提供了许多性能，容许开发人员安顿异步操作。换句话说，咱们能够立刻触发一个动作，但这些动作须要消耗肯定的工夫能力实现执行。

setTimeout 函数就是一个典型的例子。

看看函数 loadScript(src)，它应用给定的 src 加载脚本：

function loadScript(src) {
  // creates a <script> tag and append it to the page
  // this causes the script with given src to start loading and run when complete
  let script = document.createElement('script');
  script.src = src;
  document.head.append(script);
}

上述代码创立一个 <script> 标记并将其附加到页面。这会导致具备给定 src 的脚本开始加载并在实现时运行。

生产形式也很简略：

// load and execute the script at the given path
loadScript('/my/script.js');

该脚本是 异步 执行的，因为它当初开始加载，但理论脚本的运行逻辑，绝大多数时候产生在函数 loadScript 曾经实现时。

如果 loadScript(…) 上面有任何代码，这些代码会立刻执行，而不会期待脚本加载实现再执行。

假如咱们须要在新脚本加载后立刻应用它。它申明了新函数 newFunction，咱们想要运行这个函数。

然而如果咱们在 loadScript(…) 调用之后立刻调用 newFunction，那就行不通了：

loadScript('/my/script.js'); // the script has "function newFunction() {…}"

newFunction(); // no such function!

下面的代码基本不能失常工作。

天然，浏览器可能没有工夫加载脚本。到目前为止，loadScript 函数还没有提供跟踪加载实现的办法。脚本加载并最终运行，仅此而已。但咱们想晓得它何时产生，应用该脚本中的新函数和变量。

让咱们增加一个回调函数作为 loadScript 的第二个参数，它应该在脚本加载时执行：

function loadScript(src, callback) {let script = document.createElement('script');
  script.src = src;

  script.onload = () => callback(script);

  document.head.append(script);
}

onload 事件用于在脚本加载执行后执行一个函数。

当初，如果咱们想从脚本中调用新函数，咱们应该在回调中写下：

loadScript('/my/script.js', function() {
  // the callback runs after the script is loaded
  newFunction(); // so now it works
  ...
});

一个理论生产 loadScript 的例子：

function loadScript(src, callback) {let script = document.createElement('script');
  script.src = src;
  script.onload = () => callback(script);
  document.head.append(script);
}

loadScript('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js', script => {alert(`Cool, the script ${script.src} is loaded`);
  alert(_); // _ is a function declared in the loaded script
});