Javascript 执行阻止 SVG 动画答案

【问题标题】：Javascript execution blocking SVG animationJavascript 执行阻止 SVG 动画
【发布时间】：2021-01-11 18:11:57
【问题描述】：

我正面临以下问题。 HTML：

<div id='loading'>
    <svg> /* inline SVG with animateTransform tags */ </svg>
    <span>Loading, please wait...</span>
</div>
<button id='generateResult'></button>
<span id='result'></span>

JS：

$('#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 函数大约需要10 秒。在此期间，#loading 容器应该是可见的，其中包含动画的 svg 加载图标。但由于某种原因，calculate_result 函数会导致 SVG 图标停止动画。

有什么办法可以防止吗？

【问题讨论】：

能看到svg动画就好了。请检查您是否在 svg 元素中没有“加载”ID。
这真的不是问题。 #loading 容器正在淡入，没有任何问题。问题是当它制作动画（淡入）时，动画明显在运行。淡入淡出完成后（所以当calculate_result() 开始时），SVG 动画停止。

标签： javascript html jquery svg

【解决方案1】：

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

如果你有一个长时间运行的 JS 代码，你应该把它放在一个Web Worker 中，这样它就可以在一个单独的线程上运行，并在它完成工作时向主线程“发送消息”。这将允许浏览器继续响应用户交互并绘制“加载”动画。

【讨论】：