更新多个表行内容时的 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

我看到您正在尝试在加载程序完成操作时或之前返回加载程序。您可以使用 promise 来告知函数何时完成以隐藏加载程序。并将加载器包装在一个函数中，以根据 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>