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

Question

假设loading css类附加到包含动画gif图像（ 经典微调器 ）的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中没有（本机）线程，所以如何在执行一些JavaScript代码时显示和旋转该微调器？

Answer 1

如果情况就像你说的那样，这将是一个罕见的情况，让Web Worker可以使用。 有可能，你想要以一种方式实现它们，这种方式可以显示冻结的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员工：如果以上链接中断，请在“网络工作者”上搜索资源。