我有以下代码来添加内容,然后使用这个新添加的内容。
为此,有必要等待,直到内容成功添加,然后才尝试使用它。
我读过关于.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');
非常感谢,解释它应该如何!
使用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>
试试以下:
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');
基本上从函数返回值并在调用函数时通过赋值变量来检查它,它应该等到函数完成执行。
如果代码的目的是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>
有多种方法可以在这里完成你需要的东西,我建议你区分你编写的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>