Javascript SVG旋转加载图标在加载数据时冻结

这个问题与此非常相似，但我使用的是一个svg动画微调器，它定义在一个单独的文件中，所有svg图标都存储在该文件中。当我使用

$（“#spinner”）.show（）显示微调器时，微调器工作正常。但是，当我在加载数据（大量数据）期间尝试显示微调器时，它会冻结。它会在加载结束时重新启动，但我的代码会在加载结束后隐藏它。如果加载微调器不旋转，则有点违背了显示加载微调器的目的

我在下面创建了一个带有超时的演示来模拟数据处理。如果您的机器功能更强，您可以调整超时时间和记录数

我知道在提到的SO帖子中有一个css替代方案，但我想尝试保留一个svg实现

欢迎您的任何意见。谢谢


var记录=[]；
函数LoadData（）{
对于（变量i=0；i<100000；i++）{
setTimeout（records.push（“Record”+i），100000）；
}
$（“按钮”）.html（“完成”）；
}

加载数据
如果您使用Css动画，它对我来说没有问题

我唯一注意到的是：圆圈有点偏离中心。您可以使用css transform origin或svg修复此问题


var记录=[]；
函数LoadData（）{
对于（变量i=0；i<100000；i++）{
setTimeout（records.push（“Record”+i），100000）；
}
$（“按钮”）.html（“完成”）；
}

@关键帧旋转{
从{
变换：旋转（0度）
}
到{
变换：旋转（360度）
}
}
#装载{
动画：旋转。5s无限线性；
}
加载数据
似乎帧已冻结，等待加载数据。您应该考虑采用异步方式加载数据，以防止实际延迟，具体取决于加载的数据。对不起，这并不清楚，也无助于解决问题。我倾向于使用fps脚本，返回当前时间。当运行较长的循环时，您可以返回日期，若传递了一定数量的循环，则使用超时暂时停止函数并让帧通过，然后在下一帧中继续循环。