Question

我正在使用两个函数，一个用于将一组问题移到下一个问题，另一个用于移动进度条。将用户移至nextQuestion的问题将覆盖第一个函数，而progressBar函数不会处理。

没有显示错误，我更改了顺序或功能，并且有一个大功能都有相同的结果。如果我单独运行这些功能，则两个功能都可以完美它们来自@onClick按钮。

我尝试过使用相同结果的promises。

如何强制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");
        };

      },

更新

     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

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

尝试在函数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 4

首先将其存储在变量中然后移动 this.nextQuestion(item);来 if (currentWidth < newWidth) { currentWidth++; elem.style.width = currentWidth + '%'; } else{ that.nextQuestion(item); clearInterval(id); };

只允许在上一个函数完成时运行Javascript函数

4 个答案: