Завершить функцию только после окончания моего интервала.(Javascript) - PullRequest
Новая
       6

Завершить функцию только после окончания моего интервала.(Javascript)

0 голосов
/ 11 марта 2019

У меня вопрос по поводу личного проекта, над которым я работаю. Мне нужно создать эффект затухания и затухания для объекта без 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();

Спасибо !!!

1 Ответ

0 голосов
/ 11 марта 2019

Используйте 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, чтобы вы могли ждать

...