javascript - 如何等待功能结束直到转到下一个代码？

Question

我有以下代码来添加内容，然后使用这个新添加的内容。

为此，需要等待，直到内容添加成功，然后我才能尝试使用它。

我读了一些关于 .done 或 .when 和超时的内容，但我也无法理解这一点，我认为它真的很复杂 - 所以我寻求帮助以找到最简单的方法，等待添加新内容，然后再去在脚本中。

这是我的代码

function create_content(){ $('#element').html('<div>my new content</div>'); }

if($('#element div').length<=0){ create_content(); }

$('#element div').addClass('add-this-to-new-content');

非常感谢，解释它应该如何!

Answer 1

使用 promise 并在该 promise resolve 函数中委托(delegate)添加新 html 的任务并返回 resolve 中的长度。现在您可以使用 then 并检查值

function create_content() {
  return new Promise(function(resolve, reject) {
    $('#element').html('<div>my new content</div>');
    resolve($('#element div').length)

  })
}

create_content().then(function(data) {
  console.log(data);
  if (data <= 0) {
    create_content()
  } else {
    $('#element div').addClass('add-this-to-new-content');
  }


})

.add-this-to-new-content {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="element"></div>