javascript - jQuery中模拟两个函数同时执行

Question

我有以下两个功能:

loadTop(); 
loadBottom(); 

基本上，一个加载页面的顶部部分，另一个加载页面的底部部分。 loadTop 函数包括异步工作。为了确保加载在视觉上尽可能无缝，我想看看是否有一种方法可以同时执行这两个函数，但只有 loadBottom() 在后台运行，直到 loadTop() 完成后才真正完成。

我读到 JavaScript 并不真正支持多线程，但是有一种方法可以使用异步回调函数在单线程上模拟它。任何人都可以提供一个示例来说明如何执行此操作，因为它与上述两个功能有关？

Answer 1

您可以让 loadTop 返回 Promise并且只有在 Promise 得到解决时才会呈现 loadBottom 。

function loadTop() {
  console.log('Top: Loading...');
  return new Promise(function(resolve, reject) {
    // Simulate loading some data
    setTimeout(function() {
      console.log('Top: complete');
      document.getElementById('top').innerHTML = 'Top: Loaded';
      resolve();
    }, 3000);
  });
}

function loadBottom(promise) {
  console.log('Bottom: Loading...');
  // Simulate loading some data
  setTimeout(function() {
    console.log('Bottom: Waiting for top...');
    // Wait for the `loadTop` promise to complete
    promise.then(function() {
      document.getElementById('bottom').innerHTML = 'Bottom: Loaded';
    });
  }, 500);
}

loadBottom(loadTop());

<h1 id="top"></h1>
<h1 id="bottom"></h1>

也可以使用回调机制来做到这一点，但事情会变得更加复杂。您需要在两个函数之间共享一个函数。首先，loadBottom 需要创建在 top 完成时调用的函数。接下来，您需要将该函数传递回 loadTop。理论上，通过此设置，loadTop 可能会在 loadBottom 之前完成，并且回调将提前调用。这可以通过实现事件监听器来缓解。

function loadTop(cb) {
  console.log('Top: Loading...');
  // Simulate loading some data
  setTimeout(function() {
    console.log('Top: complete');
    document.getElementById('top').innerHTML = 'Top: Loaded';
    cb();
  }, 3000);
}

function loadBottom() {
  // Will get called when `loadTop` completes
  function onLoadTopComplete() {
    document.getElementById('bottom').innerHTML = 'Bottom: Loaded';
    console.log('Bottom: complete');
  }
  
  console.log('Bottom: Loading...');
  // Simulate loading some data
  setTimeout(function() {
    console.log('Bottom: Waiting for top...');
  }, 500);
  
  return onLoadTopComplete;
}

loadTop(loadBottom());

<h1 id="top"></h1>
<h1 id="bottom"></h1>