Uncaught (в обещании) ReferenceError: isBlack не определено

Question

Я вижу ошибку из заголовка в консоли браузера с таким кодом:

 jQuery(document).ready(function(){

  betterBlitzColor();

  let isBlack = true;
  function animate() {
    $(".playerInfoCoatTwo").animate({
      backgroundColor: isBlack ? "transparent" : 'black'
    }, 20);
    isBlack = !isBlack;
  }

  // Delay function,
  // allows for much flatter code when you can `await` a `Promise` compared to `setTimeout`:
  const delay = ms => new Promise(res => setTimeout(res, ms));
  async function animateAndWait(msArr) {
    for (let i = 0; i < msArr.length; i++) {
      // debugger;
      animate();
      await delay(msArr[i]);
    }
  }

  async function betterBlitzColor() {
    console.log(isBlack);
    await animateAndWait([20, 300, 50, 150, 50, 50]);
    if (myRandomNumberBetween(1, 100) <= 0) {
    console.log(isBlack);

      return delay(myRandomNumberBetween(9000, 18000))
        .then(betterBlitzColor);
    }
    await animateAndWait([650, 300]);
    if (myRandomNumberBetween(1, 100) <= 0) {
    console.log(isBlack);

      return delay(myRandomNumberBetween(9000, 18000))
        .then(betterBlitzColor);
    }
    await animateAndWait([400, 100, 100, 150]);
    console.log(isBlack);

    delay(myRandomNumberBetween(9000, 18000))
      .then(betterBlitzColor);
  }


  // console.log(myRandomNumberBetween(1, 5))
  function myRandomNumberBetween(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  }); // end of jQuery(document).ready(function()

ЕСЛИ я удаляю строки:

 jQuery(document).ready(function(){
}); // end of jQuery(document).ready(function()

снова та же ошибка.Но если я переместу строку:

}); // end of jQuery(document).ready(function()

У меня нет ошибок.Понятия не имею, что происходит ... Кто-то помогает.

В HTML:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<script src="js/typed.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>  
<script src="js/javascript.js"></script>

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

Я сменил пусть менялся на isBlack и затем получил ошибку:

Uncaught (in promise) ReferenceError: delay is not defined

Затем изменился на это:

var delay = ms => new Promise(res => setTimeout(res, ms));

И я получилошибка:

Uncaught (в обещании) TypeError: задержка не является функцией

Answer 1

Вы должны вызвать betterBlitzColor после того, как было определено все, от чего это зависит.Поместите его после объявления переменных, а не до.Объявления функций поднимаются, но никаких других назначений нет.Также обратите внимание, что если вы используете современную версию jQuery, вы можете использовать $(function() { (или $(() => { вместо jQuery(document).ready(function(){, чтобы сделать скрипт немного легче для чтения. Например:

$(() => {
  let isBlack = true;
  const delay = ms => new Promise(res => setTimeout(res, ms));
  betterBlitzColor();
  // ...

Вы также можете изменить delay на объявление функции, если вы действительно этого хотите, что приведет к ее подъему и позволит вам вызывать betterBlitzColor на более высокой строке в коде, но это делает коднемного страшнее ИМО:

$(() => {
  let isBlack = true;
  betterBlitzColor();
  function delay(ms) {
    return new Promise(res => setTimeout(res, ms));
  }
  // ...