Javascript 执行阻止 SVG 动画

Question

我面临以下问题。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>

记者：

$('#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 图标停止动画。

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

Answer 1

JavaScript 是单线程的。如果 JS 代码正在运行，浏览器将无法执行任何其他操作，包括重新绘制屏幕。所以，你的动画似乎停止了。如果你有一个长时间运行的 JS 代码，你应该把它放在一个Web Worker中，这样它就可以在一个单独的线程上运行，并在它完成工作时“通知”主线程。这将允许浏览器继续响应用户交互并绘制“加载”动画。