javascript - 等待一个函数返回一个值，然后再继续执行其他函数的其余命令

Question

我正在将 jquery 中的一些动画与一些 ajax 加载相结合 - 从函数 A，我希望能够调用函数 B 以淡出当前内容，一旦该动画完成，返回以运行函数 A 中的其余代码。 这可能吗？我正在描绘这样的事情：

function buttonClicked(){
  if(sectionHidden != true){
    hideSection($sectionRef);
  }
  //RUN THE FOLLOWING AFTER HIDE SECTION HAS FINISHED (FUNCTION B)
  loadSection();
}

function hideSection($sectionRef){
  $sectionRef.fadeTo(500,0,function(){
    return someValue;
  });
}

由于我的代码中存在一些其他复杂性（调用 hideSection 的多个函数），我无法从 hideSection 调用 loadSection。

Answer 1

.fadeTo()接受一个在淡出完成时调用的回调参数。您所要做的就是为其提供loadSection功能。以机智：

function buttonClicked() {
    if (!sectionHidden) {
        hideSection($sectionRef, loadSection);
    }
    else {
        loadSection();
    }
}

function hideSection($sectionRef, doneCallback) {
    $sectionRef.fadeTo(500, 0, doneCallback);
}

如果您不想在hideSection()从代码的另一部分调用后加载该部分：

function someStuff() {
    //stuff...
   hideSection($superRef); //won't call loadSection()
   //more stuff
}

Answer 2

不幸的是，这不是 javascript 的工作方式。在 JS 中，您的代码不应阻塞。改用回调：在函数 A 中调用 fadeTo 并在回调中提供函数 A 的其余部分。当 fadeTo 完成时调用回调。

从jquery fadeTo()：

$('#clickme').click(function() {
    $('#book').fadeTo('slow', 0.5, function() {
      // Animation complete.
    });
  });

编辑：你的代码应该是这样的......

function buttonClicked(){
  if(sectionHidden != true){
    hideSection($sectionRef, function(){
      loadSection();
    });
  }
}

function hideSection($sectionRef, func){
  $sectionRef.fadeTo(500,0,func);
}