只有在上一個功能完成時才允許運行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

執行以下操作做WHA你想要嗎？

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）的setTimeout的方法內

寫nextQuestion功能。

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