如何处理append（）函数之间发生的延迟？

我正在追加一个数组到div使用jquery，我想显示一个小的加载指标，而这种情况发生，所以我扔了一个回调函数到我的追加逻辑。这个工作，但是，我的装载机将在我的数组被绘成div之前触发它的.hide()。如何处理append（）函数之间发生的延迟？

有没有办法在阵列完成绘画之后我只能运行.hide()？

var contentpush = []; 
// create x-amount of divs (x being 'tabs') 
for (var i = 0; i < tabs; i++){ 
    contentpush.push('<li class="tab" role="tab"><a href="#tab'+(i+1)+'"><span class="icon"><span class="'+contentformat[i].icon+'" ></span></span><span class="title">'+contentformat[i].title+'</span></a></li>'); 
} 

$('.tablist').append(contentpush.join('')).ready(function(){$('#skeleton').hide(); });;

这里是正在发生的事情以及的GIF：

正如你所看到的，在我的阵列实际上是画到DIV的骨架装载机将消失很长。任何想法都非常感谢！

来源

2017-03-03 knocked loose

你可以把代码放在小提琴或codepen？ –

不完全是，整个Web应用程序都建立在公司cms上，所以它使用那些cms模块来处理我的一些逻辑，但是包含的代码是处理追加功能的唯一部分 –

您是否尝试过加载事件而不是从jQuery准备好的一个？ – mnemosdev

您是否尝试过设置超时一些毫秒？

来源

2017-03-03 13:56:30 conste

加载时间因浏览器/计算机而异，我不想为它运行设置一个静态时间，以防其他地方的加载时间更快或更短。但是，如果我找不到自动处理它的答案，这可能是我的解决方案。：/ –

不幸的是，jQuery .append()函数不包含回调函数。没有办法真正检查它的完成情况，因为它应该立即发生。按照它们出现的顺序同步，除非通过使用超时或间隔明确地告诉它们是异步的。 see this

这意味着您的.append方法将被执行，并且只有该方法完成其作业之后，才会执行其他任何操作。请尝试以下步骤

// set a time interval for the event to complete. 
$(contentpush).hide().appendTo(".tablist").fadeIn(1000); 

// a small tweak to set a call back function. 
$(".tablist").append(contentpush).append(function() { $('#skeleton').hide(); });

来源

2017-03-03 15:38:07 vrn53593

所以我注意到，在加载时，ul会被填充，这只是渲染时间，正在杀死我。如果我在删除'skeleton' div之前检查'tabs'元素，它会在加载/立即执行。但是，一旦lis实际上在页面上被绘制/呈现，似乎没有办法告诉。 –

如何处理append（）函数之间发生的延迟？

回答

相关问题