使用append（）时，为什么下拉列表会在第一次单击时逐个显示选项

Question

     $(document).on('focus', '.resource_person', function() {

        var topic_code = $(this).attr('id');
        var rp_reference = $(this).attr('selected-rp');
        var option = '';

        $.ajax({
            type: 'POST',
            url: siteUrl + 'course_management/Training_courses/topic_rp',
            data: {topic_code: topic_code},
            dataType: 'json',
            success: function(source) {
                $('.resource_person[id="'+topic_code+'"]').empty();

                for (var key in source) {
                    if (source[key] != rp_reference) {
                        option += '<option value="'+source[key]+'">'+key+'</option>';
                    } else {
                        option += '<option value="'+source[key]+'" selected="">'+key+'</option>';
                    }
                }

                console.log(option);

                $('.resource_person[id="'+topic_code+'"]').append(option);
            }
        });
    });

This what was happening when I first click the dropdown

After clicking it for the second time it goes back to the normal behavior of dropdown

Answer 1

首次点击它会导致请求导致显示项目的延迟，但它会在第二次请求时使用cahce。

如果强制请求不使用缓存，则每次都会发生相同的延迟：

$.ajax({
  cache: false,
  //other options...
});

  

注意：将缓存设置为false只能与HEAD和   GET请求。