javascript - 运行客户端代码时显示正在加载的 gif 图像

Question

假设 loading CSS 类附加到包含动画 gif 图像 (the classic spinner) 的 div。

$( document ).ready(function(){

  $(".button").click(function(event){
    $(".loading").show();
    // time-consuming code running in the browser
    $(".loading").hide();    
    return false;
  });

});

我们已经习惯于在客户端向服务器发出 ajax 请求时看到微调器图像旋转，将控制权留给 JavaScript 引擎，它可以使微调器动画化，直到 ajax 请求的回调返回。

然而，在上面的示例中，没有涉及 ajax，并且“耗时代码”位于客户端，这意味着 JavaScript 引擎无法在执行一些昂贵的操作时为 gif 设置动画客户的工作。

我知道 JavaScript 中没有( native )线程，那么如何在执行某些 JavaScript 代码时显示并旋转该微调器？

Answer 1

如果情况正如您所说，这将是一个很少见的场景，可以使用 Web Workers。很有可能，您希望以一种提供回退的方式实现它们，即显示卡住的 GIF，或尝试根据超时进行部分工作，允许 JavaScript 调用堆栈偶尔完成，以便它可以进行 UI 更新。

兼容 IE10 及更高版本，以及几乎所有其他内容: https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers

一个随机的、不完整的超时步骤示例，让您了解一下:

function doPartialWork() {

    //// do one "step" of the complex logic.

    // If complete, run a callback (and terminate without starting the timer)
    if (complete) {
        runCallback();
    }
    else {
        // Start another slice of work on the next processing cycle
        setTimeout(doPartialWork, 1);
    }
}

Google 员工:如果以上链接失效，请在“网络 worker ”上搜索资源。