更新多个表格行内容时的 JavaScript 加载器答案

【问题标题】：JavaScript loader while updating multiple table rows content更新多个表格行内容时的 JavaScript 加载器
【发布时间】：2019-04-18 21:16:36
【问题描述】：

我想在需要一段时间的操作期间显示加载程序，并在完成后隐藏。我的代码只是遍历所有表格行（大约 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();

我希望加载器在循环开始之前显示，并在循环结束后隐藏。

【问题讨论】：

使用window.onload事件或document.readydeveloper.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…
我忘了说这个函数是在点击按钮后触发的
您正在使用将冻结页面的 for 循环。如果你在 settimeout 中包装循环，那么它应该可以工作

标签： javascript jquery loops promise

【解决方案1】：

我看到你我们试图在加载器完成操作时或之前返回它。您可以使用 Promise 来判断函数何时完成以隐藏加载器。并将加载器包装在一个函数中，以根据真假值显示或隐藏它。

类似的东西。

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()
    })

}

&lt;button id="start_button"&gt;Start&lt;/button&gt;

【讨论】：