进行功能后追加

Question

好像被讨论了很多，但无法找到一个简单的答案。在向DOM添加一个加载器图标后，我想确保一个函数被执行，但理解append不支持这一点。有没有简单的解决方案？

当前代码：

$('#tab').on('shown.bs.tab', function(e) { 
    $("#htmlelement").append('<i class="fa fa-spinner fa-spin fa-fw"></i>'); 
    functionafterappend(); 
}); 

Answer 1

.append是同步功能。因此，此解决方案是有效的，并且只有在执行append后，您才会执行该解决方案。

例如，看看下面的例子中，我触发警报3秒追加完成

$('div') 
 
    .append(`<p>1. Append at ${console.log(new Date())}</p>`) 
 
$('span') 
 
    .append(`<span> 2. Another Append at ${console.log(new Date())}</span>`); 
 
    
 
    // setTimeout(() => alert("Append has been completed"), 3000); 
 

body { 
 
    padding:50px; 
 
} 
 

 
div { 
 
    border:2px solid #bbb; 
 
    background-color:#eee; 
 
    padding:10px; 
 
    margin:10px auto; 
 
} 
 

 
span { 
 
    display:block; 
 
    width:65px; 
 
    font:bold 12px Arial,Sans-Serif; 
 
    color:white; 
 
    padding:5px 10px; 
 
    background-color:black;  
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>Lorem ipsum dolor sit amet consectetur adipiscing elitr sed diam nonumy tempe goreng.</div>

后，这是做一个append后一些最简单的方法。当然除了，如果你想链的功能，像这样：

.append('<span>1. Append</span>') .prepend('<span>1. Append</span>')

如果你想要去的完全功能，你甚至可以做函数组合，像这样使用Lodash：

const newFunc = pipe(append, prepend);