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

由于 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()。