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函数委托添加新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>

Answer 2

尝试以下方法：

    function create_content_new(){ $('#element').html('<div>my new content</div>'); console.log('done_new'); return true; }

if($('#element div').length<=0){ var test = create_content_new(); }
console.log('call');
$('#element div').addClass('add-this-to-new-content');

基本上从函数返回值，并在调用函数时通过将其赋值给变量来检查它，它应该等到函数完成执行。

Answer 3

如果代码的目的是仅添加类..您可以使用类似的

function create_content(NewClass){
  $('#element').html('<div>my new content</div>').find("> div").addClass(NewClass);
}

if($('#element div').length<=0){ 
  create_content('add-this-to-new-content'); 
}

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

Answer 4

有多种方法可以满足您的需求，我建议您区分JavaScript和已编写的jquery代码，那样可以更轻松地理解方法（例如.then，.when ..etc等）

在下面的Git Repo中检查JQuery / Javascript的完全分离，希望您能够完全理解它。

GIT回购 https://github.com/helloritesh000/how-to-wait-for-end-of-function-till-go-to-next-code

<!doctype>
<html>
<head>

</head>
<body>
<div id="element">

</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    if($('#element div').length<=0){ 
        create_content(callback_function); 
    }

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

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


</script>
</body>
</html>

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

4 个答案: