如何处理 append() 函数之间发生的延迟？答案

【问题标题】：How to handle the delay that occurs between an append() function?如何处理 append() 函数之间发生的延迟？
【发布时间】：2017-07-23 16:08:46
【问题描述】：

我正在使用 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 之前很久就消失了。非常感谢您对此的任何想法！

【问题讨论】：

你能把代码放在 fiddle 或 codepen 中吗？
不完全是，整个 web 应用程序是建立在公司 cms 上的，所以它使用这些 cms 模块来处理我的一些逻辑，但包含的代码是处理附加功能的唯一部分跨度>
你尝试过加载事件而不是 jquery 中的就绪事件吗？
@ether 我怀疑对附加的影响仍然可以使用 .show('slow') 来减慢快速变化的元素。
@mnemosdev 刚刚尝试使用 .load，但它甚至没有显示骨架框架。我想我肯定需要 .ready 因为它会在追加开始后寻找，而不是在页面加载时寻找。

标签： javascript jquery html css arrays

【解决方案1】：

您是否尝试将超时设置为几毫秒？

【讨论】：

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

【解决方案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(); });

【讨论】：

所以我注意到的是，在加载时，ul 将被填充，只是渲染时间让我很生气。如果我在删除skeleton div 之前检查tabs 元素，它将在加载/立即执行。但似乎没有办法知道一旦 lis 在页面上实际绘制/渲染。