Question

我使用bootstrap创建了切换下拉菜单。下拉菜单项使用ajax调用填充。 ajax请求调用PHP脚本，该脚本从数据库中获取值并填充下拉菜单项。我使用无序列表在下拉菜单中显示项目。当我点击负责ajax调用的按钮时，这些项目会被填充，但会有延迟。当我再次点击按钮时，没有观察到任何延迟。

JQuery的：

rownames Sample1 Sample2 Sample3
ABAT-ABAT 0 0 0
ABAT-ACADSB -1.819133494    0.3023401   -0.8904574
ABAT-ACTG2 -3.409451405 0.1103111   -0.9247103

HTML：

$(document).on('click',"#itemsButton",function (e) {
                    e.preventDefault();
                    var osn = $("#osn").val();
                    //$("#items-dropdown").empty();
                    var dataString = 'searchString=' + osn;
                    if ($.trim(osn).length > 0) {
                     $.ajax({//create an ajax request to load_page.php
                            type: "POST",
                            url: "retrieveItemsOrdered.php",
                            data: dataString,
                            cache: false,
                            dataType: "html", //expect html to be returned
                            success: function (html) {
                                $("#items-dropdown").html(html); 
                            }
                        });
                    }

                });

PHP：

<div class='itemsmenu btn-group'>";
                    <button type='button' class='btn dropdown-toggle' data-toggle='dropdown' id='itemsButton'>
                    <span class=>Click here to view items&nbsp</span>
                    <span class='pull-right'><i class='fa fa-caret-down'></i></span>
                    </button>
                    <ul class='dropdown-menu ' role='menu' id='items-dropdown'>
                    </ul>
</div>

CSS：

while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
       echo "<li class='ordeinfo-style'>";
       echo "<b>".$row['sku']."</b>";
       echo "</li>";
    }

请让我理解为什么我第一次点击按钮显示下拉菜单项时遇到延迟

Answer 1

更新，请参阅这些问题PHP with MySQL is Slow (SOLVED)和Why is the response on localhost so slow?

以下不再适用

对retrieveItemsOrdered.php的第一次ajax调用会有一些延迟，具体取决于查询本身，结果数量以及数据库服务器所在的位置。

第二个电话，例如第二次单击该按钮，将产生更快的结果，因为db查询结果将由驱动程序（mysqli和mysql服务器）缓存。

您可以检查/解释数据库查询本身并对其进行优化以减少延迟。

Answer 2

这很自然，因为您使用AJAX调用来从数据库中获取记录，而与styles或HTML中的任何内容无关。

现在，这个电话正在向您的数据库一直走，并给您回复，以便您遇到延迟。这是你第一次点击按钮的时候。当您再次单击该按钮进行往返时，浏览器缓存的响应和您之前的记录仍然在列表中，因此延迟几乎无法察觉。

延迟可能是由于许多原因造成的。您的数据库位于某个远程位置，或者您的数据库查询需要一些额外的时间来评估。如果你处理大量数据，那将是最糟糕的。

请记住，拨打AJAX电话并不意味着响应会更快。在幕后，它是脚本到达时如何处理响应。它看起来很快，因为它永远不会是整页刷新。您可以从内置的浏览器开发人员工具中获得帮助。

<强>建议：

尝试优化数据库查询。从那里的好教程中获得一些帮助。如果您仍然无法找到解决方案，那么可以使用您的代码对问题进行总结，并将StackOverflow与相关详细信息放在一起。
为了获得更好的用户体验，请将加载微调器或等待消息作为毯子。
现在进行大量的重构。保存您对数据库的调用次数。返回JSON会更好而不是HTML。您的HTML应该只显示返回的数据。

下拉菜单填充第一页加载延迟

2 个答案: