Question

我有一个问题，我的进度条在其余代码完成后启动。现在我知道什么是错的，但我无法找到下一步的方法。

我意识到发生的事情是异步的，我需要使用一个承诺。你能看一下我的代码并给出一些提示吗？

    var count=1;
    var SIZE =100
    function test() {
        if (count < SIZE) {
            var value = Math.round((count / SIZE) * 100);
            count++;
            setTimeout(function () {
                $('.progress-bar').css('width', value + '%').attr('aria-valuenow', value);
                test();
            }, 100);
        }
        return;
    };

    test().then($('body').css('background-color', '#76870b'));

我想运行test（），然后让其他代码执行。

Answer 1

在这种情况下，您可以在第一个函数的末尾调用第二个函数。

var count = 1;
var SIZE = 100

function test() {
  if (count < SIZE) {
    var value = Math.round((count / SIZE) * 100);
    setTimeout(function() {
      $('.progress-bar').css('width', value + '%').attr('aria-valuenow', value);

    }, 100);
  }
  console.log('Im Executed');
  secondFunction(); // call second function
  return;
};

function secondFunction() {
  $('body').css('background-color', '#76870b')
}

test();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或

test(); secondFunction();

首先运行test()然后secondFunction()。

Answer 2

var count = 1;
var SIZE = 100

var test = () => new Promise((resolve, reject) => {
  if (count < SIZE) {
    var value = Math.round((count / SIZE) * 100);
    setTimeout(function() {
      console.log('sdfsdfsdf');
      $('.progress-bar').css('width', value + '%').attr('aria-valuenow', value);
      resolve({
        'heloo': 'dsfsdf'
      });
    }, 100);
  } else {
    reject('fdsfsd');
  }
});


test().then((resp) => {
  console.log('hello', resp);
  $('body').css('background-color', '#76870b')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

脚本在进度条开始之前执行

2 个答案: