進行功能後追加

好像被討論了很多，但無法找到一個簡單的答案。在向DOM添加一個加載器圖標後，我想確保一個函數被執行，但理解append不支持這一點。有沒有簡單的解決方案？進行功能後追加

當前代碼：

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

來源

2017-10-12 Kevin Lindmark

在上面的欺騙，存在使用'就緒（）'它調用追加元素的答案，我會給予一個嘗試第一 – Huangism

停止使用同步Ajax請求。 –

@黃色這不是.ready（）所做的。在這種情況下，它會簡單地將請求關閉，以便在下一個tick上運行，這與0間隔setTimeout基本相同。它不會等待任何事情「準備就緒」，它只是將它推到回調隊列中，因爲DOM已準備就緒。 –

.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);

來源

2017-10-12 12:50:56 nikjohn

好像只爲我工作的人。感覺像黑客解決方案，但確定。謝謝！ –

沒有什麼hacky。這是在「append」後面做最簡單的方法。當然除了，如果你想鏈的功能，像這樣： '.append（ ' 1.追加 '） .prepend（' 1.追加'）' 等。如果你想要去的完全功能，你甚至可以做函數組合，像這樣使用Lodash：常量newFunc =管（追加，前插）; 添加此答案以及 – nikjohn

這是哈克，你都在等待3秒，做一些事情，如果我沒有什麼要等待3秒？如果我想在添加元素準備就緒時執行，該怎麼辦？ – Huangism

進行功能後追加

回答

相關問題