Question

我遇到的情况是按钮事件处理程序调用一个函数，根据输入可能需要几秒钟才能完成。函数完成后，输出将显示在网格中。该功能完全是客户端。在函数运行之前，我将一个css类添加到网格包装器div，它基本上只显示一个'loading'gif / animation。

这适用于Chrome，但不适用于Firefox和IE 11。以下是我使用javascript setTimeout 0实现此目的的简化版本。

$('#calc').on('click', function(){
  $('#container').addClass('loading');
  calculate(10, function(res){
    $('#result').text(res);
    $('#container').removeClass('loading');
  });   
});

//represents my long running function
function fib(n) {
    if(n<2) {
    return n;
  }
  return fib(n-2) + fib(n-1);
}

//will be called by click handler
function calculate(n,cb) {
    setTimeout(function(){
    var result = fib(n);
    return cb(result);
  },0)

}

如您所见，我在calculate（n，cb）中使用setTimeout 0，使浏览器能够在函数启动之前显示“加载”动画，然后在完成后将其删除。但是，这在Firefox中不起作用。我有什么其他选择来实现我想做的事情？我在这里使用jQuery，但我正在使用的实际项目是使用Angular5。但这个想法应该是一样的。

这是一个jsFiddle来展示我想要做的事情。使用Mattln4D的加载动画（谢谢）

https://jsfiddle.net/alabianc/qL5zggh7/

如果你想看到一些实际的好结果，在计算中用40作为输入运行它，但不超过这个！

我感谢任何帮助！

Answer 1

我认为如果设置超时= 0，浏览器可以快速显示加载动画。当我尝试更改超时= 10或100时，我可以在chrome，ff上看到加载动画显示。

Firefox中的setTimeout 0和阻塞功能问题

1 个答案: