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

追加后执行功能

1 个答案: