Текст кнопки HTML не изменится до бесконечного цикла

Question

В коде ниже:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<button type="button" class="btn btn-danger" id="TxChg">Proceed</button>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script>
  idcate = 0;

  function checkbuff() {
    while ((idcate == 0)) {
      mis = new Date().getSeconds() % 30;
      if (mis == 2) {
        idcate = 1;
      }
    }
  }
  $('#TxChg').click(function() {
    document.getElementById("TxChg").innerHTML = "<i class='fa fa-refresh fa-spin'></i>Processing...";
    checkbuff();
  });
</script>

Я хочу, чтобы кнопка "Txchg" изменила свой текст на "Обработка ..." до того, как функция checkbuff () запущена.

Я не знаю, почему этот код всегда сначала запускает функцию checkbuff (), а потом я увижу, что кнопка изменила свой текст?

Answer 1

Вместо того, чтобы зацикливать вашу систему на спаме, поскольку вы ожидаете, что произойдет определенная секунда, вы должны выполнить логический цикл для второй. И вы можете установить время вашего первоначального вызова, чтобы дать браузеру возможность перерисовать.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<button type="button" class="btn btn-danger" id="TxChg">Proceed</button>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script>
  idcate = 0;

  function checkbuff() {
    if (!idcate) {
      var mis = new Date().getSeconds() % 30;
      
      console.log(mis);
      
      if (mis === 2) {
        idcate = 1;
      } else {
        setTimeout(checkbuff, 1000);
      }
    }
  }
  
  $('#TxChg').click(function() {
    document.getElementById("TxChg").innerHTML = "<i class='fa fa-refresh fa-spin'></i>Processing...";
    setTimeout(checkbuff, 0);
  });
</script>