加載第一頁時出現延遲的下拉菜單

Question

我使用引導程序創建了切換下拉菜單。 使用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;
        }

請讓我理解為什么第一次單擊按鈕以顯示下拉菜單項時會遇到延遲

Answer 1

更新，請查看以下問題： MySQL的PHP​​運行緩慢（已解決） ， 為什么本地主機上的響應如此緩慢？

以下不再適用

首次調用ajax調用retrieveItemsOrdered.php將有一些延遲，具體取決於查詢本身，結果數和數據庫服務器所在的位置。

第二個電話，例如。 第二次單擊該按鈕將產生更快的結果，因為db查詢結果將同時被驅動程序（mysqli和mysql服務器）緩存。

您可以檢查/解釋數據庫查詢本身，並對其進行優化以減少延遲。

Answer 2

這是很自然的，因為您正在使用AJAX調用從數據庫獲取記錄，並且與任何styles或HTML無關。

現在，該呼叫一直在您的數據庫中進行，並給您回復，因此您遇到了延遲。 這是您第一次單擊按鈕時的情況。 當您再次單擊該按鈕進行往返時，瀏覽器緩存的響應和以前的記錄仍在列表中，因此延遲幾乎不明顯。

延遲可能是由於許多原因。 您的數據庫位於某個遠程位置，或者您的數據庫查詢花費了一些額外的時間進行評估。 如果要處理大量數據，那將甚至更糟。

請記住，進行AJAX調用並不意味着響應會更快。 隱藏的內容是腳本到達時如何處理該響應。 由於從未刷新整頁，因此顯示速度很快。 您可以從內置的瀏覽器開發人員工具獲得幫助。

建議：

• 嘗試優化您的數據庫查詢。 從不錯的教程中獲得一些幫助。 如果您仍然找不到解決方案，則對您的代碼問題做一個很好的總結，並在StackOverflow上加上相關的詳細信息。
• 為了獲得更好的用戶體驗，請將正在加載中的微調器或等待消息用作毯子。
• 現在進行了很多重構。 保存您對數據庫進行的呼叫次數。 返回JSON比HTML更好。 您的HTML應該只顯示返回的數據。