setInterval () останавливается во время выполнения кода

Question

У меня сложилось впечатление, что setInterval(function, delay) будет планировать вызов на function каждые delay миллисекунды.Это будет повторяться до тех пор, пока не будет вызван clearInterval().Тем не менее, кажется, что я что-то упустил.

У меня есть следующий образец страницы.Цель проста: переключить текст с Загрузка -> Загрузка. -> Загрузка .. каждую секунду.Вот пример цикла, работающего как положено:

    $(document).ready(function(){
        $('#loading_icon').html("Loading");
        loop = setInterval(function() {
            updateText();
        }, 1000);
    });

    function updateText() {
        loadingText = $('#loading_icon').html();
        $('#loading_icon').html(loadingText == "Loading"  ? "Loading."  : 
                                loadingText == "Loading." ? "Loading.." : 
                                "Loading");
    }

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

Ничего подобного.Проблема в том, что он не выполняет этот код, пока JavaScript делает что-то еще.Я настроил следующий пример:

    $(document).ready(function(){
        $('#loading_icon').html("Loading");
        loop = setInterval(function() {
            updateText();
        }, 1000);

        for(i = 0; i < 100000; i++)
           var a = fib(i);  // Just an arbitrary method to simulate work
    });

    function fib(n){
        var a=1,b=0,t;while(n>=0){t=a;a=a+b;b=t;n--;}return b;
    }

    function updateText() {
        loadingText = $('#loading_icon').html();
        $('#loading_icon').html(loadingText == "Loading"  ? "Loading."  : 
                                loadingText == "Loading." ? "Loading.." : 
                                "Loading");
    }

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

В идеале, текст изменился бы, когда мы выполняли всю эту работу (в конце концов, именно поэтому я и пишу эту функцию «загрузки»),Однако, похоже, что звонки на updateText() не выполняются, пока у JS нет ничего лучше.

Что мне здесь не хватает?Есть ли способ сделать то, что я после?

Answer 1

Ваше понимание setInterval() кажется правильным.Он не должен останавливать код за пределами своей функции обратного вызова.Скорее всего, ваш код попал в другое место.

Что касается выполнения того, что вы пытаетесь сделать, ваше решение должно работать, но это не очень элегантный способ манипулирования DOM.Я вижу, что вы используете jQuery, который имеет довольно надежную анимацию .Я хотел бы использовать что-то вроде этого.

Answer 2

Да, это все еще работает - проблема в том, что ваш цикл над fib выполняется первым, затем setInterval запускается позже.Вы можете уменьшить длину цикла, чтобы увидеть, как он работает идеально:

$(document).ready(function() {
  $('#loading_icon').html("Loading");
  loop = setInterval(function() {
    updateText();
  }, 1000);

  for (i = 0; i < 100000; i++)
    var a = fib(i); // Just an arbitrary method to simulate work
});

function fib(n) {
  var a = 1,
    b = 0,
    t;
  while (n >= 0) {
    t = a;
    a = a + b;
    b = t;
    n--;
  }
  return b;
}

function updateText() {
  loadingText = $('#loading_icon').html();
  $('#loading_icon').html(loadingText == "Loading" ? "Loading." :
    loadingText == "Loading." ? "Loading.." :
    "Loading");
}

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

К сожалению, вы не можете сделать очень длинный цикл и запустить setInterval в одно и то же время.