仅在我的间隔结束后结束一个功能。 （JavaScript）的

Question

我有一个关于我正在工作的个人项目的问题。我需要为没有CSS的对象创建淡入和淡出效果，并且我的间隔和功能很难，因为我需要在移动到下一组功能之前完成淡出功能。

// Interval parameters
var bgtInterval =       [0, false, 50];


// Fade functions will change fill following brightStep array values.

function fadeOut(){ 
  let i = 11;
  OBJECT.setAttribute("fill", brightSteps[i]);
  bgtInterval[1]=true;
  bgtInterval[0] = setInterval(function(){
    FULLCLOCK.setAttribute("fill", brightSteps[i]);
    if (i<=0){
      clearInterval(bgtInterval[0]);
      bgtInterval[1]=false;
    }
    i--;
  }, bgtInterval[2]);
}

function fadeIn(){
  let i = 0;
  OBJECT.setAttribute("fill", brightSteps[i]);
  bgtInterval[1]=true;
  bgtInterval[0] = setInterval(function(){
    FULLCLOCK.setAttribute("fill", brightSteps[i]);
    if (i>=11){
      clearInterval(bgtInterval[0]);
      bgtInterval[1]=false;
    }
    i++;
  }, bgtInterval[2]);
}

-

function resetSettings(id){
  fadeOut(); // I need fadeOut to finish before I move forward
  displayReset();
  displayShow();
  fadeIn(); // I need fadeIn to finish before I move out of this function
}

//THE MAIN FUNCTION//
resetSettings();
moreFunctionsHere();

谢谢！！！

Answer 1

使用Promises和async / await来实现这一目的非常简单

var bgtInterval =       [0, false, 50];


// Fade functions will change fill following brightStep array values.

function fadeOut(){ 
  // return the Promise
  return new Promise(resolve => {
    let i = 11;
    OBJECT.setAttribute("fill", brightSteps[i]);
    bgtInterval[1]=true;
    bgtInterval[0] = setInterval(function(){
      FULLCLOCK.setAttribute("fill", brightSteps[i]);
      if (i<=0){
        clearInterval(bgtInterval[0]);
        bgtInterval[1]=false;
        // resolve when done
        resolve();
      }
      i--;
    }, bgtInterval[2]);
  });
}

function fadeIn(){
  // return a Promise
  return new Promise(resolve => {
    let i = 0;
    OBJECT.setAttribute("fill", brightSteps[i]);
    bgtInterval[1]=true;
    bgtInterval[0] = setInterval(function(){
      FULLCLOCK.setAttribute("fill", brightSteps[i]);
      if (i>=11){
        clearInterval(bgtInterval[0]);
        bgtInterval[1]=false;
        // resolve when done
        resolve();
      }
      i++;
    }, bgtInterval[2]);
  });
}

// use async so we can await a Promise
async function resetSettings(id){
  // wait for fadeOut to finish
  await fadeOut();
  displayReset();
  displayShow();
  await fadeIn();
}

//THE MAIN FUNCTION//
// as we are in global scope, you can't use `async` ... so use Promise.then instead
resetSettings().then(moreFunctionsHere);

你会看到我在最后一行使用.then，因为在全局范围内你不能使用await

但是你可以这样做

(async () => {
  await resetSettings();
  moreFunctionsHere();
})();

一个异步IIFE所以你可以等待