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

Question

我使用jquery将一个数组附加到div，我想在发生这种情况时显示一个小的加载指示器，所以我把一个回调函数放到我的追加逻辑上。然而，这可行，我的加载器会在我的数组被绘制到div之前触发它.hide()。

有没有办法在数组完成绘制后才能运行.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之前很久就会消失。对此有任何想法都非常感谢！

Answer 1

你试过设置超时几毫秒吗？

Answer 2

不幸的是，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(); });