仅在间隔结束后结束功能.(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

使用承诺和异步/等待实现这一目标

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

您会看到我在使用。

您可以做

之类的事情

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

异步IIFE，所以您可以等待