jQuery 函数 $.html() 不等待其他代码行完成

编程问答 2022-05-02

问题描述

我正在尝试从另一个文件中读取数据并在 HTML（更准确地说是 x3d）中使用这些数据。

为了做到这一点，我使用 $.getJSON 读取数据，并使用 $("div").html( "*html code*" )，使用 html 代码中的变量在网站中显示数据。

问题是在$.getJSON读取数据之前执行了*$("div").html( "html code" )*。

这是我的代码：

<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() 函数会忽略其他函数并且总是先执行。

如果我只是将数据直接分配给变量，它会起作用。问题是我需要读取一个 JSON 文件来获取数据。

我该如何解决这个问题？

编辑： 我刚刚发现这个问题只发生在我在 HTML 中使用 X3D 时。 使用普通 HTML， $.html() 工作正常。但是对于 X3D，函数 $.html() 不能正常工作。所以我还在想办法解决这个问题。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptjqueryx3d