Jquery рекурсивная функция ... затем, оповещение - PullRequest
Новая
       12

Jquery рекурсивная функция ... затем, оповещение

1 голос
/ 17 апреля 2020

У меня есть рекурсивная функция с условием "если / еще". Я хотел бы, чтобы окно "оповещения" открывалось, когда условие ЗАВЕРШЕНО, но окно "оповещения" открывается ДО завершения условия. Почему? 

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>

1 Ответ

2 голосов
/ 17 апреля 2020

Браузер будет отображать изменения, спровоцированные 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>

Или, если вы хотите, чтобы оповещение появлялось как можно скорее без использования магического номера c, например 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>
...