Javascript执行阻止SVG动画

Question

我正面临以下问题。 HTML：

Device

JS：

USController

注意：这不是实际的代码，只是一个快捷示例。

问题是执行RemoteController函数大约需要10秒钟。在这段时间内，<div id='loading'> <svg> /* inline SVG with animateTransform tags */ </svg> <span>Loading, please wait...</span> </div> <button id='generateResult'></button> <span id='result'></span> 容器应该可见，其中包含一个动画的$('#generateResult').click(function(){ $('#loading').fadeIn(100, function(){ // After showing the 'loading' container, run the calculate_result function let result = calculate_result(); // When it's done, output the result into #result span $('#result').html(result); }); }); 加载图标。但是由于某些原因，calculate_result函数导致SVG图标停止动画。

有什么办法可以防止这种情况？

Answer 1

JavaScript是单线程的。如果JS代码正在运行，则浏览器将无法执行其他任何操作，包括重新绘制屏幕。因此，您的动画似乎停止了。

如果您有一个运行时间较长的JS代码，则应将其放在Web Worker中，以便它可以在单独的线程上运行，并在工作完成后“发送消息”主线程。这将使浏览器可以继续响应用户交互并绘制“正在加载”动画。