仅在我的间隔结束后结束函数。 (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，所以你可以等待

仅在我的间隔结束后结束函数。 (Javascript)

End a function only after the end of my interval. (Javascript)

javascript

function

intervals