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

【问题标题】：setTimeout 0 and blocking function issues in FirefoxFirefox 中的 setTimeout 0 和阻塞功能问题
【发布时间】：2018-01-26 02:29:49
【问题描述】：

我遇到了一种情况，按钮事件处理程序调用了一个函数，这可能需要几秒钟才能完成，具体取决于输入。函数完成后，输出将显示在网格中。该功能完全是客户端。在函数运行之前，我向网格包装器 div 添加了一个 css 类，它基本上只显示一个“正在加载”的 gif/动画。

这在 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 作为输入运行它，但仅此而已！

感谢您的帮助！

【问题讨论】：

如果我增加超时延迟，我可以在 Firefox 中正常工作。只试了 200 次，但时间不多
仅供参考，在超时函数中使用return 是没有意义的。

标签： javascript internet-explorer firefox settimeout

【解决方案1】：

我想如果你设置 timeout = 0，那么浏览器就可以显示加载动画了。当我尝试更改 timeout = 10 或 100 时，我可以在 chrome、ff 上看到加载动画。

【讨论】：