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

Question

假设loading css类附加到包含动画gif图像的div（the classic spinner）。

$(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工作人员使用起来是有意义的。很可能你想要以一种可以显示一个冻结的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员工：如果上面的链接打破了，搜索“网络工作者”的资源。