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中，这样它就可以在一个单独的线程上运行，并在它完成工作时“通知”主线程。这将允许浏览器继续响应用户交互并绘制“加载”动画。