Только для выполнения функции Javascript при завершении предыдущей функции

Question

Я использую две функции, одну из которых переводит набор вопросов к следующему вопросу, а другой - для перемещения индикатора выполнения. Вопрос, который перемещает пользователя в nextQuestion, переопределяет первую функцию, а функция progressBar не обрабатывается.

Нет ошибок, и я изменил порядок или функции, и одна большая функция имеет одинаковый результат. Если я выполняю функции отдельно, обе функции работают идеально. Они начинаются с @onClick на кнопке.

Я попытался использовать обещания с тем же результатом.

Как я могу заставить функцию nextQuestion работать только при завершении progressBar?

Бар Прогресс

 progressBar: function(item){ 

     this.percentQuestion = 100/this.numberQuestions; 

     var elem = document.getElementById("myBar"); 

     var numericWidth = elem.style.width.replace(/\D/g,''); 

     var currentWidth = +numericWidth; 

     var newWidth = +numericWidth + +this.percentQuestion; 

     var id = setInterval(frame, 10); 
     function frame() { 
      if (currentWidth < newWidth) { 
      currentWidth++; 
      elem.style.width = currentWidth + '%'; 
      } else{ 
      clearInterval(id); 
      }; 

      }; 

     this.nextQuestion(item); 

    }, 

Следующий вопрос

 nextQuestion: function(item){ 

     var newKey = item + 1; 

     var y = document.getElementById('question' + item); 

     var x = document.getElementById('question' + newKey); 

      if(y.style.display === 'block'){ 
       y.style.display = 'none'; 
       x.style.display = 'block'; 
       console.log("Changed"); 
     }; 

     }, 

UPDATE

 nextQuestion: function(item){ 


     window.setTimeout(function() { function(item){ 

      var newKey = item + 1; 

      var y = document.getElementById('question' + item); 

      var x = document.getElementById('question' + newKey); 

       if(y.style.display === 'block'){ 
        y.style.display = 'none'; 
        x.style.display = 'block'; 
        console.log("Changed"); 
      }; 
     }, 1000); 

     }, 

Answer 1

ли следующие сделать ва ты хочешь?

progressBar: function(item){ 

    this.percentQuestion = 100/this.numberQuestions; 

    var variables = { 
     elem: document.getElementById("myBar"), 
     numericWidth: elem.style.width.replace(/\D/g,''), 
     currentWidth: +numericWidth, 
     newWidth: +numericWidth + +this.percentQuestion, 
    }; 

    // This isn't the nicest way of doing this but it should work 
    var that = this; 

    var id = setInterval(function(){ 
     frame(item, variables); 
    }, 10); 

    function frame(item, variables) { 
     if (variables.currentWidth < variables.newWidth) { 
     variables.currentWidth++; 
     variables.elem.style.width = variables.currentWidth + '%'; 
     } else{ 
     clearInterval(id); 
     that.nextQuestion(item); 
     }; 

    }; 
}, 

Answer 2

Попробуйте с добавлением this.nextQuestion(item); внутри функции frame()

var self=this; 
function frame() { 
     if (currentWidth < newWidth) { 
     currentWidth++; 
     elem.style.width = currentWidth + '%'; 
     } else{ 
     clearInterval(id); 
     } 
    self.nextQuestion(item); 
    }; 

, как frame() выполняется в setInterval() вы будете иметь this.nextQuestion(item) в каждом интервале конца.

Answer 3

Вы можете использовать SetTimeout (HTML API)

написать функцию nextQuestion внутри метода SetTimeout.

window.setTimeout(function() { 
    function(item){ 
     var newKey = item + 1; 

     var y = document.getElementById('question' + item); 

     var x = document.getElementById('question' + newKey); 

     if(y.style.display === 'block'){ 
      y.style.display = 'none'; 
      x.style.display = 'block'; 
      console.log("Changed"); 
     }; 
    }, 1000); 

Answer 4

магазин это в переменной первого затем просто перейти this.nextQuestion(item); к if (currentWidth < newWidth) { currentWidth++; elem.style.width = currentWidth + '%'; } else{ that.nextQuestion(item); clearInterval(id); };