如何等待函数结束直到转到下一个代码？

Question

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

为此，有必要等待，直到我尝试使用此内容之前成功添加了内容。

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

这是我的代码

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 个解决方案

解决方案1
1 2019-02-21 05:39:38

解决方案2
0 2019-02-21 05:35:54

解决方案3
0 2019-02-21 05:43:58

解决方案4
0 2019-02-21 07:12:04

如何等待函数结束直到转到下一个代码？

问题描述

4 个解决方案

解决方案1 1 2019-02-21 05:39:38

解决方案2 0 2019-02-21 05:35:54

解决方案3 0 2019-02-21 05:43:58

解决方案4 0 2019-02-21 07:12:04

解决方案1
1 2019-02-21 05:39:38

解决方案2
0 2019-02-21 05:35:54

解决方案3
0 2019-02-21 05:43:58

解决方案4
0 2019-02-21 07:12:04