JS在選擇下拉菜單打開時創建延遲

Question

我有一個列出主題的下拉菜單。 我正在通過AJAX調用加載這些主題。 主題加載正確，只是在菜單打開后它們加載的速度不夠快，無法填充選擇菜單。 這導致用戶需要打開菜單，關閉菜單，然后再次打開它。

如何在打開下拉菜單時造成延遲，以使響應有足夠的時間來填充下拉菜單？ 感謝您提供的所有幫助。

---

碼：

下拉式菜單

<div id="subjectForm" class="form-row">
    <label>1) Subject Selection:</label>
    <select name="subject" id="subjectSelect" class="input-medium">
        <option value="0">All</option>
    </select>
</div>

AJAX電話

document.getElementById("subjectForm").addEventListener("click", function( event ) {
    var selectCount = $('#subjectSelect option').size();

    if(selectCount == 1) {
        $.ajax({
            url: '/v2/subjects?',    
            method: 'GET',
            data: {'core': number},
            success: function (data) {
                // Populates the $subjectSelect filter with subjects
                // For each grade brought back from response, add it to the grade filter
                $.each(data, function(i, subject){
                    $('#subjectSelect')
                        .append($('<option></option>')
                        .attr("value", subject.id)
                        .text(subject.title));
                });// each
            }// success
        });// ajax
    }// end if
}, false);// #subjectForm clicked

Answer 1

幾秒鍾后渲染選項

success: function (data) {
    // Populates the $subjectSelect filter with subjects
    // For each grade brought back from response, add it to the grade filter
    var myoptions = "";
    $.each(data, function(i, subject){
        myoptions += "<option value='"+subject.id+"'>"+subject.title+"</option>";      
    });
    $('#subjectSelect').html(myoptions);
}

希望它能解決問題。

Answer 2

由於number值是默認值，因此我將更改加載准備好在文檔就緒時進行，而不是等到單擊事件發生。

$(document).ready(function () {
    var loadSubjectSelect = function(){
        var selectCount = $('#subjectSelect option').size();
        if(selectCount == 1) {
            $.ajax({
                url: '/v2/subjects?',    
                method: 'GET',
                data: {'core': number},
                success: function (data) {
                    // Populates the $subjectSelect filter with subjects
                    // For each grade brought back from response, add it to the grade filter
                    $.each(data, function(i, subject){
                        $('#subjectSelect')
                            .append($('<option></option>')
                            .attr("value", subject.id)
                            .text(subject.title));
                    });
                }
            });
        }
    };

    loadSubjectSelect();    
})();

然后，當您添加另一個菜單時，可以在其單擊事件上調用loadSubjectSelect() 。