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

问题描述 投票:2回答:4

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

为此,有必要等待,直到内容成功添加,然后才尝试使用它。

我读过关于.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');

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

javascript jquery
4个回答
1
投票

使用promise并在promise中解析函数委托添加新html的任务并返回解析中的长度。现在你可以使用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>

0
投票

试试以下:

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

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


0
投票

如果代码的目的是JUST添加一个类..你可以使用这样的东西

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>

0
投票

有多种方法可以在这里完成你需要的东西,我建议你区分你编写的JavaScript和jquery代码,这样就可以更容易理解方法(如.then,.when ..etc)

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

GIT Repo 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>
© www.soinside.com 2019 - 2024. All rights reserved.