Question

我有2个功能：

fadeOutBox();
fadeInInfoBlock();

我只想在第一个（fadeInInfoBlock）完成后才运行第二个（fadeOutBox）。

回调函数是这样做的唯一/最佳方法吗？

在另一个功能完成之后，还有其他方法可以运行一个功能吗？

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

这就是我要进行的工作-正在将多个冗余功能合并为一个功能，但是目前我为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;

next函数运行其他执行不透明淡入淡出循环的函数：

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

}

function fadeInBoxesFadeOutInfoBlock01() {
setTimeout(function() { fadeIn01(); }, 200);
setTimeout(function() { fadeOutInfoBlock01(); }, 100);

}

我添加了setTimeouts来尝试处理过快的鼠标移动。如果用户缓慢移动鼠标，该代码将运行良好。这是我遇到的主要问题-我想在将事件侦听器添加回框之前，需要完全完成淡入淡出/淡入淡出。认为这样可以更好地处理鼠标在框上移动得太快的情况。

这是方框1的fadeOut循环（同样，我彼此之间还有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);

}

然后淡入infoBlocks：

function fadeInInfoBlock01() {

    infoBlock01.style.zIndex = 0; // THIS PUTS DIV AT TOP OF THE STACK, SO THE MOUSEENTER CAN TOUCH THE GRIDBOX

    var infoBlockOpacity = 0.1;  // initial opacity
    var timer = setInterval(function () {
    if (infoBlockOpacity >= 1){
        clearInterval(timer);
    }
    infoBlock01.style.opacity = infoBlockOpacity;
    infoBlockOpacity += 0.1;
    }, 30);

}

Answer 1

您可以使用async / await

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

Answer 2

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

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

我只想在第一个之后运行第二个（fadeInInfoBlock）一个（fadeOutBox）完成

鉴于问题的要求和代码，一种方法是在第一个功能的最后一行执行第二个功能。

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

fadeOutBox()

Answer 3

请将该函数转换为promise

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

I型

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

II型

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

如果不使用await，请确保fadeInInfoBlock也将是一个Promise函数

JavaScript中回调函数的替代方法

3 个答案: