我目前正在开发一个Electron应用程序,我希望在接收到来自主进程的信号后立即刷新渲染器进程中的某些元素。为了实现这一点,我使用JQuery更改了div的.html()
,这里的问题是我似乎太快地调用.html()
了,因此某些元素没有被正确地渲染。
这是我的主要流程代码:
function onImportedWsiListRefreshed(e, _) {
for (let i = 0; i < imported_wsi_list.length; i++) {
if (imported_wsi_list[i].thumbnail == null) {
imported_wsi_list[i].thumbnail = getWsiThumbnail(imported_wsi_list[i].path);
}
e.sender.send('main:onThumbnailUpdated', i, imported_wsi_list[i].thumbnail);
}
}
渲染器过程中的函数接收信号并更新UI:
function onThumbnailUpdated(sender, index, thumbnail_pth) {
let wsi_list_frame = $('#wsi_list_frame').contents();
wsi_list_frame.find(`#thumbnail_${index}`).html(
`<img class="ui image" id="thumbnail_${index}" alt="thumbnail" src="${thumbnail_pth}" />`);
}
我检查了一下,onThumbnailUpdated
收到了所有信号,这里没有问题,图像也一样,它们已经正确创建。但是我怀疑.html()
函数的调用速度太快,这就是我得到的结果:
如您所见,某些图像可以正确渲染,而另一些图像则不能正确渲染,而且非常随机。
知道如何克服这个问题吗?我以为也许可以找到一种方法来将对.html
的调用排队,以便它们被同步调用,但是我敢肯定,有经验的js开发人员比在此问题上抛出乱码有更好的解决方案。谢谢大家!