追加后执行功能[重复]

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 是一个同步函数。因此，这个方案是有效的，你的functionafterappend()只会在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);