javascript - jQuery 同时更新 DOM 元素和计算

Question

所以我有这个页面，点击按钮，图像在对其存储为数据属性的元数据执行各种计算后添加修饰。

由于计算可能需要几秒钟，我想在图像上显示叠加层。所以我这样做:

$(selectedImageId).addClass('loading');
//perform series of calculations here...
$(selectedImageId).removeClass('loading').addClass('calculated-embellishments');

我会想象脚本首先在图像上显示加载叠加层，然后执行冗长的计算，然后用选定的修饰类替换叠加层。不过貌似最后才更新DOM，没看到加载类，几秒后直接从素图跳到美化类。

如果我在添加修饰的最后一行之前添加 alert('test')，那么我可以在图像上看到加载覆盖，但在其他情况下看不到。

如上文所述，我怎样才能按照我想要的方式进行这项工作？非常欢迎任何指点!

Answer 1

可能发生的情况是您的“冗长计算”使浏览器“挂起”以进行处理，没有机会重新绘制图像以反射(reflect)新添加的加载类。

一旦计算完成，您的最后一条指令将 loading 类替换为 calculated-embellishments 类，现在浏览器有时间重新绘制。但是 loading 类已经消失了。

您至少有 3 种变通方法可以让浏览器在计算繁忙之前实际显示您的 loading 类:

• 按照@csum 的建议使用setTimeout，这是对浏览器在重新绘制之前需要多少时间的赌注，该重绘将通过loading 显示您的图像> 类。因此需要“测试”不同的超时值，但仍无法保证结果将取决于每个客户端的当前性能(CPU、内存、当前 CPU 负载!)。
• 在覆盖层(如果是图像)的 “load” 事件的回调中开始计算。但我不确定 "load" 事件是否保证图像(覆盖)被绘制(显示在屏幕上)。
• 在开始计算之前，使用 2 个嵌套的 requestAnimationFrame 确保至少发生了 1 次重绘。