jquery 加载程序在没有超时的情况下不可见[已关闭]

9lowa7mx  于 2023-08-04  发布在  jQuery
关注(0)|答案(2)|浏览(99)

**已关闭。**此问题需要debugging details。它目前不接受回答。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答这个问题。
22天前关闭
这篇文章是编辑并提交审查21天前.
Improve this question
我正在使用Ember JS的应用程序,我想在更新我的DOM之前显示完整的加载器,例如,
table.hbs

<div id="full-loader"></div>
{{#each data as |val|}}
    <p>val</p>
{{/each}}
<button {action 'updateData'}>Add More</button>

字符串
table.js

addValues(){
    for(var i=0;i<100;i++){
        data.pushObject(i)
}

@action
updateData(){
    Ember.$("#full-loader").css("display","block");
    addValues();
}

didRender(){
    Ember.$("#full-loader").css("display","none");
}


完全加载程序从未显示,但当我在调用addValues()时使用setTimeOut()时,现在完全加载程序显示了!!!.这是什么原因造成的?

blpfk2vs

blpfk2vs1#

someFuncToUpdateDOM();正在阻塞。它只是在主事件循环中执行操作。
当阻塞代码运行时,浏览器不执行DOM的重绘(这是一个效率特性;这意味着您可以对DOM进行100次更改,然后进行一次重绘,而不是100组更改和100次关联的重绘)。
添加setTimeout意味着子序列阻塞代码不会立即运行。当它等待超时过期并被放入任务队列时,浏览器会继续做其他事情(包括重新绘制)。

tjvv9vkg

tjvv9vkg2#

可以尝试requestAnimationFrame()而不是setTimeout()

Ember.$("#full-loader").css("display", "block");

requestAnimationFrame(() => {
  someFuncToUpdateDOM();

  Ember.$("#full-loader").css("display", "none");
});

字符串

相关问题