如何在Vue.js中一个接一个地运行多个函数?

时间:2017-02-20 18:19:51

标签: javascript function methods vuejs2

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

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

     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");
        } else {
            console.log("ERROR");
        };

      },

      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) {
            clearInterval(id);
          } else if(currentWidth < 100){
            currentWidth++;
            elem.style.width = currentWidth + '%';
              }
              else{
                console.log('max');
              };
          };

        this.nextQuestion(item);

     },

0 个答案:

没有答案