Question

我正在使用一系列JavaScript函数从数据库加载信息，并使用创建缩略图图像的信息和用户理论上创建并上传到数据库的每个“漫画”记录对应的单选按钮

创建HTML标记时出现问题。虽然图像和按钮都正确创建且没有错误，但它们以错误的顺序输出。它们应按字母顺序加载'comicName'，它在单选按钮的文本中表示，例如：

Comic A (img)
Comic B (img)
Comic C (img)

我已经检查了'comicID'的数组'arr'，它使用窗口警报确定代码中几个阶段输出的html对象的顺序，并且在所有阶段，即使输出不正确，漫画也会在数组中正确排序。当我有很多警报立刻打开时，有一个奇怪的情况;物品DO实际上以正确的顺序输出。（在这种情况下，阵列中有大约6个'comicID'，并且每个ID都会在三个不同的时间弹出警报。）

因此，我认为代码是按照正确的顺序创建它们并尝试输出它们，但由于图像大小或其他一些处理原因，某些项目可能比其他项目更快地加载。如果确实如此，我将如何对其进行排序以确保它们正确加载？

提前致谢。

使用Javascript：

<script>

        // Loads the user's comic list from the database.
        function loadComic()
        {
        var xmlhttp = new XMLHttpRequest();
        var getID = '<?php echo $_SESSION["userID"]; ?>';
        var url = "loadCom.php?userID="+getID;


        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                loadComicJSON(xmlhttp.responseText);
            }
        }

        xmlhttp.open("GET", url, true);
        xmlhttp.send();

        }

        // JSON parsing for 'loadComic'.
        function loadComicJSON(response)
        {
            var arr = JSON.parse(response);
            var i;
            var out = "";

            document.getElementById("loadList").innerHTML="";

            if (arr.length == 0)
            {
                document.getElementById("uploadTagID").innerHTML="";
                document.getElementById("uploadTagID").innerHTML="No Comics Uploaded";
                document.getElementById("btnDeleteComic").disabled=true;
                document.getElementById("btnEditComic").disabled=true;
                document.getElementById("btnDelAllComics").disabled=true;
                $("#listButtons").hide();
            }
            else
            {   
                document.getElementById("loadList").innerHTML="<br>";

                for(i = 0; i < arr.length; i++)
                {
                    tempID = (arr[i].comicID);
                    getCoverJSON(arr, i, tempID);

                }

                document.getElementById("uploadTagID").innerHTML="";
                document.getElementById("uploadTagID").innerHTML="<u>Uploaded Comics</u>";
                document.getElementById("btnDeleteComic").disabled=false;
                document.getElementById("btnEditComic").disabled=false;
                document.getElementById("btnDelAllComics").disabled=false;
                $("#listButtons").show();

            }

        }

    </script>

    <script>

        // Function to prevent $.get from technically being inside a loop (fixes an issue when loading more than one item).
        function getCoverJSON(arr, i, tempID)
        {   
            $.get("getCover.php", {'comicID': tempID}, function(result)
            {
                getCover(result, arr, i);                           
            }
            );
        }

    </script>

    <script>

        // Function to create a list of radio buttons and associated images from a user's comic list.
        function getCover(result, arr, i)
        {
            var buildLine = document.getElementById("loadList").innerHTML;
            if (result[0].pageLocation == "nocvr")
            {
                var out = "<hr><br><input name='comicList' type='radio' id='" + arr[i].comicID + "' value='" + arr[i].comicID + "'>" + arr[i].comicName + " </option><br><br><img name = '" + ('cm' + arr[i].comicID) + "' id='" + ('com' + arr[i].comicID) + "' onclick='resizeThumb(this)' height='100px;' src='assets/img/nocvr.jpg'><br><br>";

                document.getElementById("loadList").innerHTML="";
                document.getElementById("loadList").innerHTML=(buildLine + out);
            }
            else
            {
                var getImg = result[0].pageLocation;
                var out = "<hr><br><input name='comicList' type='radio' id='" + arr[i].comicID + "' value='" + arr[i].comicID + "'>" + arr[i].comicName + " </option><br><br><img name = '" + ('cm' + arr[i].comicID) + "' id='" + ('com' + arr[i].comicID) + "' onclick='resizeThumb(this)' height='100px;' src='" + getImg + "'><br><br>";

                document.getElementById("loadList").innerHTML="";
                document.getElementById("loadList").innerHTML=(buildLine + out);
            }

        }

    </script>

PHP（loadCom.php）：

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$user = $_GET['userID'];
include_once('includes/conn.inc.php');


$query = ("SELECT comicID, comicName  FROM comic WHERE userID = '$user' ORDER BY comicName ASC");
$result = mysqli_query($conn, $query);

$outp = "[";
while($rs = $result->fetch_array(MYSQLI_ASSOC))
{
    if ($outp != "[")
    {
        $outp .= ",";
    }
    $outp .= '{"comicID":"' . $rs["comicID"] . '",';
    $outp .= '"comicName":"' . $rs["comicName"] . '"}';

}
$outp .="]";

$conn->close();
echo ($outp);

?>

PHP（getCover.php）

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
if (isset($_GET["comicID"]))
{
    include_once('includes/conn.inc.php');
    $checkID = $_GET["comicID"];

    $query = ("SELECT pageLocation FROM page WHERE comicID = '$checkID' ORDER BY pageNum");
    $result = mysqli_query($conn, $query);

    if (mysqli_num_rows($result) == 0)
    {
        $outp = '[{"pageLocation":"nocvr"}]';

        echo ($outp);
    }
    else
    {
        $outp = "[";
        while($rs = $result->fetch_array(MYSQLI_ASSOC))
        {
            if ($outp != "[")
            {
                $outp .= ",";
            }
            $outp .= '{"pageLocation":"' . $rs["pageLocation"] . '"}';
        }
        $outp .="]";

        $conn->close();
        echo ($outp);
    }

}
else
{   
    $checkID = null;
    echo "Error. No comic found.";
}

?>

Answer 1

您正在使用AJAX调用，默认情况下是异步的 - 无法保证响应返回的顺序是什么。如果你有A，B，C的请求，那么对A的响应可能会在C响应后20分钟到来，因为有人的反铲在某处切断了光缆并导致A请求比C更长的路径到服务器。 / p>

您可以切换到同步，但这会在请求待处理时锁定浏览器，这是一种糟糕的用户体验。

你最好简化代码。而不是每次获取一个ajax调用，你应该有一个调用，并发送你想要获取的所有ID。

换句话说，而不是

$.get('getCover.php', {id:1});
$.get('getCover.php', {id:2});
$.get('getCover.php', {id:3});

将代码切换到

$.get('getCover.php', {ids:[1,2,3]});

现在它是一个单独的ajax请求，一个json响应，在该响应中，您可以随意订购数据。

InnerHTML创建问题，没有以正确的顺序加载，可能的处理问题

1 个答案: