JavaScript中回调函数的替代方案

我有两个功能：

fadeOutBox();
fadeInInfoBlock();

我只想在第一个（

fadeInFoBlock

）完成后运行第二个（

fadeInFoBlock

）

回调函数是唯一/最好的方法吗

在另一个函数完成后，是否有其他方法运行该函数

编辑：此处添加的其他代码：

以下是我正在进行的工作-正在将多个冗余函数合并为一个函数，但目前我为12个框（div）中的每一个都提供了函数，用于为mouseenter/leave添加侦听器，然后我使用setInterval循环来增加/减少不透明度以打开和关闭淡入淡出框

添加侦听器：

var box01 = document.getElementById("grid01");
box01.addEventListener("mouseenter", fadeOutBoxesFadeInInfoBlock01);
box01.addEventListener("mouseleave", fadeInBoxesFadeOutInfoBlock01);
infoBlock01.style.zIndex = -1; // THIS PUTS DIV AT THE BACK OF THE STACK, SO THE MOUSEENTER CAN TOUCH THE GRIDBOX
infoBlock01.style.opacity = 0;

下一个函数运行执行不透明度淡入淡出循环的其他函数：

function fadeOutBoxesFadeInInfoBlock01() {
setTimeout(function() { fadeOut01(); }, 200);
setTimeout(function() { fadeInInfoBlock01(); }, 200);

}

}

我添加了设置超时，试图处理鼠标移动过快的问题。如果用户缓慢地移动鼠标，则代码运行良好。这是我面临的主要问题-我认为在将事件侦听器添加回方框之前，我需要完全完成淡出/淡出。认为这样可以更好地处理鼠标在框上移动过快的问题

下面是框1的淡出循环（同样，我还有11个这样的循环，每个框都有，但是我还没有弄清楚如何合并到一个函数中：

function fadeOut01() {

removeListeners();
var op = 1;  // initial opacity
var timer = setInterval(function () {
    if (op <= 0.1){
        clearInterval(timer);

    }
    box02.style.opacity = op;
    box03.style.opacity = op;
    box04.style.opacity = op;
    box05.style.opacity = op;
    box06.style.opacity = op;
    box07.style.opacity = op;
    box08.style.opacity = op;
    box09.style.opacity = op;
    box10.style.opacity = op;
    box11.style.opacity = op;
    box12.style.opacity = op;

    op -= op * 0.1;
}, 20);

setTimeout(function() {addListeners(); }, 1000);

}您可以使用/

---

除了函数调用之外，没有代码出现在问题处

唯一的要求是按特定顺序调用函数

我只想在第一次之后运行第二次（

fadeInInfoBlock

） 一个（

fadeOutBox

）完成

考虑到问题的需求和代码，一种方法是在第一个函数的最后一行执行第二个函数

function fadeOutBox() {
  // do stuff
  fadeInInfoBlock()
}

fadeOutBox()

---

请将函数转换为承诺

  function fadeOutBox(){
   return new Promise(function(resolve, reject) {
   //True statement
    resolve('true')
   });
  }  

第一类

fadeOutBox.then(function(value) {
 console.log(value);
 fadeInInfoBlock();
 })

第二类

async function syncFn(){
    await fadeOutBox(); 
    await fadeInInfoBlock();
}

---

确保FadeInFoblock在不使用Wait时也是一个promise函数。如果第一个函数有一些异步代码，则不要使用Wait

或

await

a

promise

，否则它们将在没有任何操作的情况下一个接一个地运行fadeOutBox（）中的代码是什么？我认为它有一些异步触发器。确保第一个函数首先返回一个承诺，ofc@CertainPerformance这是什么意思？如果返回值不是承诺，wait将值转换为resolved promised。您可以

wait

非承诺，但除非调用的函数实际返回承诺，否则

wait

将立即解析，因此将立即调用下一个函数，这几乎是肯定的undesirable@CertainPerformance哦，是的，这很有道理：）谢谢你指出，伙计：）从这个问题上看，我很明显，函数是异步的，并返回承诺。但要知道，这是我小小的大脑正在寻找的简单方法，这一点很好。我还没有完全理解async/await/promise，callback（）似乎增加了我的复杂性。我已经读了好几篇关于它的解释，但目前我还看不懂。但是……在本例中，我如何保证fadeOutBox（基本上是一个运行循环以降低box/div的不透明度的setInterval函数）中的命令在FadeInFoBlock运行之前完全完成？我的代码现在乱七八糟，我正试图将多个冗余函数合并为一个，但我会发布它。@warlock7您可以使用

if

语句检查元素的

opacity

是否等于

0

，如果为true，

break

循环，调用

clearInteval（）

，执行

fadeInInfoBox（）

。另一种方法是使用<代码>元素。动画动画API（<代码> >代码> > OnFultEng/<代码>可以使用，例如，在更新的问题上，参见@ WARCKOR7RE代码，如建议的，将考虑使用<代码>元素。

  function fadeOutBox(){
   return new Promise(function(resolve, reject) {
   //True statement
    resolve('true')
   });
  }  

fadeOutBox.then(function(value) {
 console.log(value);
 fadeInInfoBlock();
 })

async function syncFn(){
    await fadeOutBox(); 
    await fadeInInfoBlock();
}