仅允许在前一个函数完成时运行Javascript函数

我使用两个功能，一个是将一组问题移动到下一个问题，另一个是移动进度条。将用户移动到

nextQuestion

的问题会覆盖第一个函数，而

progressBar

函数不会处理

没有显示任何错误，我已经改变了顺序或函数，拥有一个大函数都会得到相同的结果。如果我分别运行这两个函数，这两个函数都能完美工作。它们起源于@onClick上的按钮

我尝试过使用承诺，但效果相同

如何仅在

progressBar

完成时强制运行

nextQuestion

功能

进度条

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


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

      },

---

以下内容是否符合您的要求

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

    };
},

progressBar:函数（项）{
this.percentQuestion=100/this.numberQuestions；
变量变量={
元素：document.getElementById（“myBar”），
numericWidth:elem.style.width.replace（/\D/g'），
currentWidth:+numericWidth，
newWidth:+numericWidth++this.percent问题，
};
//这不是最好的方法，但应该有效
var=这个；
var id=setInterval（函数（）{
框架（项目、变量）；
}, 10);
功能框架（项目、变量）{
if（variables.currentWidth

以下操作是否符合您的要求

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

    };
},

progressBar:函数（项）{
this.percentQuestion=100/this.numberQuestions；
变量变量={
元素：document.getElementById（“myBar”），
numericWidth:elem.style.width.replace（/\D/g'），
currentWidth:+numericWidth，
newWidth:+numericWidth++this.percent问题，
};
//这不是最好的方法，但应该有效
var=这个；
var id=setInterval（函数（）{
框架（项目、变量）；
}, 10);
功能框架（项目、变量）{
if（variables.currentWidth

尝试添加

此.nextQuestion（项目）函数内部
frame（）

var self=this；
函数框架（）{
如果（当前宽度<新宽度）{
currentWidth++；
elem.style.width=currentWidth+'%'；
}否则{
清除间隔（id）；
}
下一个问题（项目）；
};

由于
frame（）
是在
setInterval（）中执行的
this.nextQuestion（项目）
将在每个间隔结束时都有
this.nextQuestion（项目）
。
尝试添加
this.nextQuestion（项目）函数内部
frame（）

var self=this；
函数框架（）{
如果（当前宽度<新宽度）{
currentWidth++；
elem.style.width=currentWidth+'%'；
}否则{
清除间隔（id）；
}
下一个问题（项目）；
};

由于在
setInterval（）
中执行
frame（）
，您将在每个间隔结束时有
此.nextQuestion（项）
。
您可以使用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);

您可以使用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);

先将其存储在变量中，然后再移动
this.nextQuestion（项目）到
if（currentWidth};
先将其存储在变量中，然后再移动
this.nextQuestion（项目）到
if（currentWidth
};
运行JSFIDLE创建您的场景会很有帮助。我不完全确定您的意思，但看起来您应该将
这个.nextQuestion（项）
放在
其他
中的
clearInterval（id）之后
。运行JSFIDLE创建您的场景会很有帮助。我不完全确定您的意思，但看起来您应该将
这个.nextQuestion（项）
放在
其他
中，在
clearInterval（id）
之后。感谢您的帮助。。。我现在得到一个控制台错误
this.nextQuestion不是一个函数
我已经将
this
移动到函数外部的一个变量，并将项传递到
frame（）
中，但是现在得到这个错误
无法读取null的属性“style”
。在
nextQuestion
中没有到达Like项，只是编辑了答案，将
var=this
添加到
frame（）函数之外。这是一个有点黑客，但它将有望做你想要的。对不起，只是阅读你的评论正确。尝试第二次编辑。我还没有检查它，但我相信它应该可以让您访问
项目
。谢谢，现在它会移动到
nextQuestion
，但不会处理
progressBar
，因此会移动进度条。你知道为什么会这样吗？谢谢你。。。我现在得到一个控制台错误
this.nextQuestion不是一个函数
我已经将
this
移动到函数外部的一个变量，并将项传递到
frame（）
中，但是现在得到这个错误
无法读取null的属性“style”
。在
nextQuestion
中没有到达Like项，只是编辑了答案，将
var=this
添加到
fr之外