javascript - 如果函数花费的时间超过 X 毫秒，则显示加载微调器

Question

我想显示一个加载微调器，但前提是“my_code_here”的执行时间超过 X 毫秒。

我已经设法做到了:

<button onClick='my_long_function()'></button>
<div class="spinner" style="display: none;"></div>

my_long_function: function()
{
    $(".spinner").show(200, function()
    {
        my_code_here
        my_code_here
        my_code_here

        $(".spinner").hide();
    }
}

它可以工作，但即使代码花费的时间少于 100 毫秒，它也会显示微调器，所以它会在眨眼间出现，但我很难让它看起来不错。

请注意，这不是 ajax 等待服务器响应，而是所有客户端。

我通过阅读 5 个 stackoverflow 问题尝试了 setTimeout 和 clearTimeOut，但它似乎没有触发或微调器永远保持不变。

Answer 1

https://jsfiddle.net/w9khvx50/1/

const loader = document.querySelector('.loader');
const status = document.querySelector('.status');

// This function simply emulates an asynchronous function
const wait = (ms = 5000) => {
    return new Promise((resolve) => {
    setTimeout(() => {
        resolve();
    },ms)
  })
}

const toggleLoader = (state) => {
    loader.classList.toggle('show', state);
}


const timeout = setTimeout(toggleLoader, 2000);

status.textContent = "Starting load function";
wait(4000)
.then(() => {
    status.textContent = "Load function complete";
    toggleLoader(false);
        clearTimeout(timeout);
})

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  opacity: 0;
}

.loader.show {
  opacity: 1;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<div>
  <div class="loader"></div>
  <div class="status"></div>
</div>

这里最好的办法就是清除超时，我想你之前一定是实现错误了。如果 const timeout 中的 ms 小于 wait 时间，加载程序将显示。

请注意，如果您正在执行的函数不是异步的，那么您将需要调查 Web Workers，因为您的函数将阻塞主线程并且不会执行任何其他操作(例如运行超时回调)。您应该创建一个 web worker，将您的长函数委托(delegate)给它，然后如果您在时间到之前收到一条完整的消息，则清除超时。