[英]drop down menu populating with delay on first page load
我使用引导程序创建了切换下拉菜单。 使用ajax调用填充下拉菜单项。 ajax请求调用一个PHP脚本,该脚本从数据库中获取值并填充下拉菜单项。 我使用无序列表在下拉菜单中显示项目。 当我单击负责ajax调用的按钮时,这些项目正在填充,但有延迟。 当我再次单击该按钮时,没有观察到延迟。
JQuery的:
$(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);
}
});
}
});
HTML:
<div class='itemsmenu btn-group'>";
<button type='button' class='btn dropdown-toggle' data-toggle='dropdown' id='itemsButton'>
<span class=>Click here to view items </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>
PHP:
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
echo "<li class='ordeinfo-style'>";
echo "<b>".$row['sku']."</b>";
echo "</li>";
}
CSS:
.dropdown-menu {
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none
}
.itemsmenu .btn{
text-align: center;
}
ul {
min-width: 200px;
}
.items-dropdown{
text-align: center;
}
ul b{
font-weight: normal;
display: inline block;
font-size: 16px;
font-weight: bolder;
color: #000;
}
.quantity{
font-size: 16px;
margin-right: 20px;
color: #000;
}
请让我理解为什么第一次单击按钮以显示下拉菜单项时会遇到延迟
更新,请查看以下问题: MySQL的PHP运行缓慢(已解决) , 为什么本地主机上的响应如此缓慢?
以下不再适用
首次调用ajax调用retrieveItemsOrdered.php
将有一些延迟,具体取决于查询本身,结果数和数据库服务器所在的位置。
第二个电话,例如。 第二次单击该按钮将产生更快的结果,因为db查询结果将同时被驱动程序(mysqli和mysql服务器)缓存。
您可以检查/解释数据库查询本身,并对其进行优化以减少延迟。
这是很自然的,因为您正在使用AJAX
调用从数据库获取记录,并且与任何styles
或HTML
无关。
现在,该呼叫一直在您的数据库中进行,并给您回复,因此您遇到了延迟。 这是您第一次单击按钮时的情况。 当您再次单击该按钮进行往返时,浏览器缓存的响应和以前的记录仍在列表中,因此延迟几乎不明显。
延迟可能是由于许多原因。 您的数据库位于某个远程位置,或者您的数据库查询花费了一些额外的时间进行评估。 如果要处理大量数据,那将甚至更糟。
请记住,进行AJAX
调用并不意味着响应会更快。 隐藏的内容是脚本到达时如何处理该响应。 由于从未刷新整页,因此显示速度很快。 您可以从内置的浏览器开发人员工具获得帮助。
建议:
JSON
比HTML
更好。 您的HTML
应该只显示返回的数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.