Only allowing a Javascript function to run when the previous function has finished

Question

I am using two functions, one to move a set of questions to the next question and the other to move a progress bar on. The question that moves the user to the nextQuestion overrides the first function and the progressBar function doesn't process.

There are no errors shown and I have changed the order or the functions and having one big function all have to the same result. If I run the functions separately both functions work perfect. They originate from @onClick on a button.

I have tried using promises with the same result.

How can I force the nextQuestion function only to run when progressBar has finished?

Progress Bar

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

  },

Next Question

     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

Does the following do what you want?

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

You can use setTimeout (HTML API)

write nextQuestion function inside the setTimeout method.

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 3

Try with adding this.nextQuestion(item); inside your function frame()

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

as frame() is executed in setInterval() you will have this.nextQuestion(item) in each interval end.

Answer 4

store this in a variable first then just move this.nextQuestion(item); to if (currentWidth < newWidth) { currentWidth++; elem.style.width = currentWidth + '%'; } else{ that.nextQuestion(item); clearInterval(id); }; if (currentWidth < newWidth) { currentWidth++; elem.style.width = currentWidth + '%'; } else{ that.nextQuestion(item); clearInterval(id); };