Question

我有以下两个功能：

loadTop(); 
loadBottom();

基本上，一个加载页面的顶部，另一个加载页面的底部。 loadTop函数包括异步工作。为了确保尽可能在视觉上无缝加载，我想看看是否有办法同时执行这两个函数，但只有loadBottom（）在后台运行，并且在loadTop（）完成之前实际上并不完整。

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

Answer 1

您可以loadTop返回Promise，并且只有loadBottom呈现此Promise才能解析。

＆＃13;

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());

＆＃13;

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

＆＃13;

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

＆＃13;

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());

＆＃13;

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

＆＃13;

Answer 2

就像你设置一个指标并不断检查它是否已被改变。

function loadTop() {
console.log('Top: Loading...');
// As Finished go invoke the callBack loadTopFinished
loadTopFinished();
}
function loadTopFinished(){
  indicator = 1;
}
function loadBottom(promise) {
  console.log('Bottom: Loading...');
  // Simulate loading some data
  loadCheck();
}
function loadCheck(){
  if(1 == indicator){
    // It's done.
    console.log("Bottom: Loaded");
  }
  // Haven't Done, then do something continuously in loadBottom(Alike)
  setTimeout(loadCheck,1000);

}
var indicator = 0;
loadTop();
loadBottom();

或者如果你想创建一个事件循环，那么就像这样

虽然你可以使用这样的方式：

function TheloopHere(){
  loadBottom();
  while(true){
    if(loadTopCheck()){
      break;
    }
  }
}

function loadTopCheck(){
    // Some loading asychonouly here
    // After Loading for top
    return;
}

或者你可以使用post-function回调来完成loadBtm中的工作，通过在loadTop之后调用它来

Answer 3

如果您使用的是ES6功能，那么您可以使用ES6承诺， GO Through Doc

否则你可以将Callback传递给你的一个函数让我们说加载顶部并在那个回调你可以引导你的负载底部功能

在jQuery中同时模拟两个函数的执行

3 个答案: