jQuery递归函数…然后，警报

Question

我具有带有“ if / else”条件的递归函数。我想在条件为“完成”时打开“警告”窗口，但条件结束之前会打开“警报”窗口。为什么？

function myFunc(num) {

  newNum = num + 1;

  if (newNum < 10000) {
    $('body').append(newNum + ', ');
    myFunc(newNum);
  } else {
    alert("...finished !")
  }
}

myFunc(1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

仅当Javascript执行完其同步代码并且资源可用后，浏览器才会呈现Javascript发起的更改。您可以在setTimeout之后发出警报：

function myFunc(num) {

  newNum = num + 1;

  if (newNum < 10000) {
    $('body').append(newNum + ', ');
    myFunc(newNum);
  } else {
    setTimeout(() => alert("...finished !"), 200);
  }
}

myFunc(1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

或者，如果您希望不使用200这样的幻数就尽快发出警报，则可以将setAnimationFrame回调（将在浏览器重新绘制之前运行）排队，在该回调中调用setTimeout，这样setTimeout会在重新绘制后立即运行：

function myFunc(num) {

  newNum = num + 1;

  if (newNum < 10000) {
    $('body').append(newNum + ', ');
    myFunc(newNum);
  } else {
    window.requestAnimationFrame(() => {
      setTimeout(() => alert("...finished !"));
    });
  }
}

myFunc(1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>