[英]jQuery function $.html() does not wait for other lines of code to finish
我正在尝试从另一个文件中读取数据并在 HTML（更准确地说是 x3d）中使用这些数据。
为此，我使用 $.getJSON 读取数据，并使用$("div").html( "*html code*" )使用 html 代码中的变量在网站中显示数据。
问题是 * $("div").html( "html code" )*在$.getJSON读取数据之前执行。
这是我的代码：
<html>
<head>
<title>Superficie soja 63</title>
<script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link>
</head>
<body>
<h1>Superficie soja 63</h1>
<div></div>
<script>
var a = [];
var b = [];
var c = [];
var tria = [];
var trib = [];
var tric = [];
var str = "";
var str_tri = "";
$.getJSON("dados_teste.json", function(data) {
for(var cont in data.pontos){
a.push(data.pontos[cont].x);
b.push(data.pontos[cont].y);
c.push(data.pontos[cont].z);
str += (`${a[cont]} ${b[cont]} ${c[cont]}, `);
}
str = str.slice(0, -2);
});
$.getJSON("tri_teste.json", function(data) {
for(var cont in data.triangulos){
tria.push(data.triangulos[cont].tri_a);
trib.push(data.triangulos[cont].tri_b);
tric.push(data.triangulos[cont].tri_c);
str_tri += (`${tria[cont]} ${trib[cont]} ${tric[cont]}, `);
}
str_tri = str_tri.slice(0, -2);
});
setTimeout(() => { console.log(str); }, 1000);
setTimeout(() => { console.log(str_tri); }, 2000);
$("div").html( `
<x3d width='1000px' height='1000px'>
<scene>
<shape>
<appearance>
<ImageTexture
url='https://thumbs.dreamstime.com/b/macro-soybean-food-texture-background-top-view-96368287.jpg'/>
<TextureTransform
translation='0 0'
rotation='0'
repeats='true'
repeatt='true'
scale='80 80'/>
</appearance>
<IndexedTriangleSet
ccw='true'
colorPerVertex='true'
index='${str_tri}'
normalPerVertex='true'
solid='false'
containerField='geometry'>
<Coordinate id="teste"
point='${str}'/>
<Viewpoint
position='0 0 10'
orientation=''
description='camera'/>
</IndexedTriangleSet>
</shape>
</scene>
</x3d> ` )
</script>
</body>
</html>
我已经尝试使用setTimeout()和delay()来解决这个问题，但看起来$.html() function 忽略了其他函数，总是先执行。
如果我只是将数据直接分配给变量，它就可以工作。 问题是我需要读取 JSON 文件来获取数据。
我怎么解决这个问题？
已编辑：我刚刚发现只有在 HTML 中使用 X3D 时才会出现此问题。 对于正常的 HTML，$.html() 可以正常工作。 但是对于 X3D，function $.html() 行为不正常。 所以我还在想办法解决这个问题。
我尝试使用 javascript 以多种不同的方式使此代码工作，并发现问题出在 X3D 上。 到目前为止发布的所有答案都有意义，但是当 HTML 代码中包含 X3D 时，它们不起作用。
所以我决定改用 PHP，现在它可以工作了！
<html>
<head>
<title>Superficie soja 63</title>
<script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'></link>
</head>
<body>
<h1>Superficie soja 63</h1>
<?php
$path = "dados_teste.json";
$file = fopen($path, "r");
$data="";
while(!feof($file)){
$data .= fread($file, filesize($path));
}
fclose($file);
$data= json_decode($data, true);
$str="";
for($cont=0; $cont < count($data["pontos"]); $cont++){
if($cont < count($data["pontos"])-1)
$str .= ($data["pontos"][$cont]["x"] . " " . $data["pontos"][$cont]["y"] . " " . $data["pontos"][$cont]["z"] . ", " );
else
$str .= ($data["pontos"][$cont]["x"] . " " . $data["pontos"][$cont]["y"] . " " . $data["pontos"][$cont]["z"] );
}
$path = "tri_teste.json";
$file = fopen($path, "r");
$data="";
while(!feof($file)){
$data .= fread($file, filesize($path));
}
fclose($file);
$data= json_decode($data, true);
$str_tri="";
for($cont=0; $cont < count($data["triangulos"]); $cont++){
if($cont < count($data["triangulos"])-1)
$str_tri .= ($data["triangulos"][$cont]["tri_a"] . " " . $data["triangulos"][$cont]["tri_b"] . " " . $data["triangulos"][$cont]["tri_c"] . ", " );
else
$str_tri .= ($data["triangulos"][$cont]["tri_a"] . " " . $data["triangulos"][$cont]["tri_b"] . " " . $data["triangulos"][$cont]["tri_c"] );
}
echo "
<x3d width='1000px' height='1000px'>
<scene>
<shape>
<appearance>
<ImageTexture
url='https://thumbs.dreamstime.com/b/macro-soybean-food-texture-background-top-view-96368287.jpg'/>
<TextureTransform
translation='0 0'
rotation='0'
repeats='true'
repeatt='true'
scale='80 80'/>
</appearance>
<IndexedTriangleSet
ccw='true'
colorPerVertex='true'
index='${str_tri}'
normalPerVertex='true'
solid='false'
containerField='geometry'>
<Coordinate
point='${str}'/>
<Viewpoint
position='0 0 10'
orientation=''
description='camera'/>
</IndexedTriangleSet>
</shape>
</scene>
</x3d>
";
?>
</body>
</html>
我的结论是：如果您使用 X3D，最好使用后端编程语言。
我不是 jQuery 方面的专家，但是通过快速查找，我认为您应该在 getJSON 之后尝试.then() function，然后在代码 then 的括号内编写 rest 这个问题中使用了一个例子
此外，您可以使用此链接中指定的 the.done() 而不是.then()（您必须向下滚动一点才能查看 the.done() 示例）
另一种选择是将您的 $("div").html() 添加到 getJson 回调 function 中，如下所示：
$.getJSON("dados_teste.json", function(data) {
//your current code
//you $("div").html() code
}
让我知道这个答案是否有帮助:)
尝试将一个任务的执行与另一个任务的开始计时，称为race condition ，应该避免。 而是在收到变量后调用您的.html() 。 因为你有 2 个独立的依赖进程创建变量，你可以在makeDiv() function 中检查它们。
var str, str_tri
$.getJSON("dados_teste.json", function(data) {
...
str = str.slice(0, -2);
makeDiv();
});
$.getJSON("tri_teste.json", function(data) {
...
str_tri = str_tri.slice(0, -2);
makeDiv();
});
function makeDiv() {
if (!str || !str_tri || str =='' || str_tri == '') return;
$("div").html( `......`);
}
jQuery / Javascript：2个函数调用在一行，等待其他函数完成？
[英]jQuery/Javascript: 2 function calls in line, wait for the other to finish?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.