Загрузчик JavaScript при обновлении содержимого нескольких строк таблицы

Question

Я хотел бы отобразить загрузчик во время операции, которая занимает некоторое время, и скрыться после того, как это сделано. Мой код просто перебирает все строки таблицы (около 2000) и обновляет содержимое в их ячейках.

Проблема в том, что этот экран загрузчика не вызывает вызов до выполнения кода, поэтому он не показывает загрузчик.

$('#loader').fadeIn();

const $rows = $('.rows:checked');

for (let i = 0; i < $rows.length; ++i) {
  const id = $rows[i].dataset.productId;
  const $text = document.getElementById(`text-${id}`);
  const $value = document.getElementById(`value-${id}`);

  $value.textContent = value;
  $text.textContent = text;
}

return $('#loader').fadeOut();

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

Answer 1

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

Примерно так.

function loader(show) {
    if (show) {
        // True, we show loader
        $('#loader').fadeIn();
    } else {
        // Was loader(false) we hide it
        $('#loader').fadeOut();
    }
}

function start() {
    loader(true); // Show loader
    return new Promise((resolve) => {
        for (let i = 0; i < $rows.length; ++i) {
            const id = $rows[i].dataset.productId;
            const $text = document.getElementById(`text-${id}`);
            const $value = document.getElementById(`value-${id}`);

            $value.textContent = value;
            $text.textContent = text;
        }
      resolve() // Resolve
    })
}
// Run start() function then wait until it resolves(), finishes to do something
start().then(() => {
    // Our loop finished
    loader(false) // Hide loader
})

По сути, будет делать это

function loader(b) {
   if (b) {
      console.log('Showing loader');
   } else {
      console.log('Hiding loader');
   }
}

function start() {
    loader(true);
    return new Promise((resolve, reject) => {
         console.log('Start()');
         resolve();
         // We also could use reject() for error handling
    })
}

let start_button = document.getElementById('start_button');
start_button.onclick = function() {
    start().then(() => {
         console.log('Function resolved and finished');
         loader(false);
    }).catch((error) => {
         // If we use reject()
    })

}

<button id="start_button">Start</button>