javascript - 单击单选按钮时的 Ajax 调用有时会在即时到大约 2 秒之间交替

Question

有 2 个单选按钮。根据您单击的那个，下拉框将加载该组数据。根据我单击的第一个，加载大约需要 1-2 秒，而另一个会立即加载。甚至来回点击。我想知道为什么，以及如何让它立即停止加载（很奇怪，我知道）。

$('#rblGenre').change( function() {
    $('#ddlSpecificGenre').attr('disabled','disabled').html( '<option>Loading...</option>' )
    var genre = $(this + ':checked').val();

    $.ajax({
        type: 'GET',
        url: '../bookGenres.xml',
        dataType: 'xml',
        success: function( xml ) {
            var xmlGenre = $(xml).find( genre );
            $('#ddlSpecificGenre').removeAttr('disabled').children().remove();
            xmlGenre.children().each( function() {
                $('#ddlSpecificGenre').append( '<option>' + $(this).text() + '</option>' );
            });
        }
    });
});

---

<asp:RadioButtonList ID='rblGenre' runat='server'>
    <asp:ListItem Text='Fiction' Value='Fiction'></asp:ListItem>
    <asp:ListItem Text='Non-Fiction' Value='Non-Fiction'></asp:ListItem>
</asp:RadioButtonList>

<asp:DropDownList ID='ddlSpecificGenre' runat='server' Enabled='false'>
    <asp:ListItem Text='Choose a Genre' Selected='True'></asp:ListItem>
</asp:DropDownList>

Answer 1

在我看来，您的响应正在被缓存。如果您想使用 jQuery 关闭缓存，请将“cache: false”添加到“ajax”调用中的设置列表中。

所以你的函数调用会变成：

$.ajax({
    type: 'GET',
    url: '../bookGenres.xml',
    dataType: 'xml',
    cache: false,
    success: function( xml ) {
        var xmlGenre = $(xml).find( genre );
        $('#ddlSpecificGenre').removeAttr('disabled').children().remove();
        xmlGenre.children().each( function() {
            $('#ddlSpecificGenre').append( '<option>' + $(this).text() + '</option>' );
        });
    }
});