Javascript jQuery函数$.html（）不会等待其他代码行完成
我试图从另一个文件中读取数据，并在HTML（更准确地说是x3d）中使用这些数据 为了做到这一点，我使用$.getJSON读取数据，并使用html代码中的变量在网站中显示数据 问题是*Javascript jQuery函数$.html（）不会等待其他代码行完成,javascript,html,jquery,x3d,Javascript,Html,Jquery,X3d,我试图从另一个文件中读取数据，并在HTML（更准确地说是x3d）中使用这些数据 为了做到这一点，我使用$.getJSON读取数据，并使用html代码中的变量在网站中显示数据 问题是*$（“div”）.html（“html代码”）*在$.getJSON读取数据之前执行 这是我的密码： <html> <head> <title>Superficie soja 63</title> <
$（“div”）.html（“html代码”）*<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>
超级大豆63
超级大豆63
var a=[]；
var b=[]；
var c=[]；
var-tria=[]；
var-trib=[]；
var=[]；
var str=“”；
var str_tri=“”；
$.getJSON（“dados_teste.json”），函数（数据）{
用于（数据中的var cont.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”），函数（数据）{
for（数据中的变量cont.triangulas）{
tria.push（data.triangulos[cont].tri_a）；
trib.push（data.triangulos[cont].triu-b）；
tric.push（data.triangulos[cont].tri_c）；
str_tri+=（`${tria[cont]}${trib[cont]}${tric[cont]}，`）；
}
str_tri=str_tri.切片（0，-2）；
});
setTimeout（（）=>{console.log（str）；}，1000）；
setTimeout（（）=>{console.log（str_tri）；}，2000）；
$（“div”）.html（`
` )
setTimeout（）delay（）$.html（）对于普通HTML，$.HTML（）可以正常工作。但是对于X3D，函数$.html（）的行为不正常。因此，我仍在尝试解决这个问题。我不是jQuery方面的专家，但通过快速查找，我认为您应该在getJSON之后尝试.then（）函数，然后在then括号内编写其余代码。这方面的一个例子在本文中使用 此外，您可以使用中指定的.done（）而不是.then（）（您必须向下滚动一点才能看到.done（）示例） 另一种选择是在getJson回调函数中添加$（“div”）.html（），如下所示：
$.getJSON("dados_teste.json", function(data) {
//your current code
//you $("div").html() code
}
让我知道这个答案是否有用：）尝试将一个任务的执行与另一个任务的开始计时被称为竞争条件，应该避免。而是在收到变量后调用
.html（）makeDiv（）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( `......`);
}
我尝试使用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>
超级大豆63
超级大豆63
这对你有帮助吗？我想我说得太快了。我的代码没有考虑到你有2个变量在等待，因此应该得到一个否决票。我修改了我的答案，让我知道它是否有帮助。@LucasVoelcker-那有帮助吗？我意识到你的解决方案适用于普通HTML，就像这里回答的其他解决方案一样也有意义。问题在于X3D。当我在HTML中使用X3D时，$.HTML（）无法正常工作。所以我认为javascript可能不是X3D使用的最佳语言。我现在用PHP进行了测试，它成功了！不过还是要谢谢你的帮助！