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和耗时的代码＆＃34;位于客户端的，这意味着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员工：如果以上链接中断，请在＆＃34;网络工作者＆＃34;上搜索资源。

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

1 个答案: