在第一页加载时用延迟填充的下拉菜单


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&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>

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很慢(已解决)以及为什么localhost上的响应如此缓慢?

以下内容不再适用

retrieveItemsOrdered.php的第一个ajax调用会有一些延迟,这取决于查询本身、结果数量以及DB服务器所在的位置。

第二次调用,例如第二次单击按钮,将产生更快的结果,因为数据库查询结果将由驱动程序(mysqli和mysql服务器)缓存。

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

这是很自然的,因为您正在使用AJAX调用从DB中获取记录,而与stylesHTML中的任何一个都无关。

现在,这个电话一直打到你的DB,并给你回复,所以你正在经历延迟。这是你第一次点击按钮的时候。当您再次点击该按钮进行往返旅行时,浏览器缓存的响应和您以前的记录仍在列表中,因此延迟几乎不会引起注意。

延迟可能有多种原因。数据库位于某个远程位置,或者数据库查询花费了一些额外的时间进行评估。如果你要处理大量的数据,那将是最糟糕的。

请记住,拨打AJAX呼叫并不意味着响应会更快。在封面下,这是脚本到达时如何处理该响应。它看起来很快,因为它从来都不是一个完整的页面刷新。您可以从内置的浏览器开发工具中获得帮助。

建议:

  • 尝试优化数据库查询。从那些不错的教程中获得一些帮助。如果你仍然无法找到解决方案,那么用你的代码对你的问题进行一个很好的总结,并在StackOverflow上添加相关的细节
  • 为了获得更好的用户体验,将加载微调器或等待消息作为橡皮布
  • 现在,这在很大程度上属于重构。保存您对DB的呼叫次数。返回JSON将比返回HTML更好。您的HTML应该只显示返回的数据