Jquery 递归函数...然后,警报

Jquery recursive function... then, alert

我有一个带 "if/else" 条件的递归函数。 我想在条件完成时打开 "alert" window, 但是 "alert" window 在条件结束之前打开。为什么?

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>

一旦 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>