jQuery 实时搜索键控显示加载

Question

我正在尝试显示加载动画并在发送 ajax 请求之前隐藏搜索输入框，".se-pre-con"元素是加载器。

正如您在下面看到的，我试图在 ajax 请求之前发送中显示这一点。但是，当用户在搜索框中键入内容，然后在指定的延迟（1000ms）内停止时，输入框仍显示整个ajax请求，但无响应。

然后返回结果，加载动画执行淡出，因此 show（） 必须触发，但页面保持不变，直到返回结果。我想防止页面无响应效果并在请求期间显示加载动画。任何帮助都非常感谢。

$(document).ready(function() {
var delay = (function() {
    var timer = 0;
    return function(callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();
$('#search_field').keyup(function() {
    var target = $(this);
    delay(function() {
        getSearchResults(target.val());
    }, 1000);
});
function getSearchResults(str) {
    $.ajax({
        beforeSend: function(){
            $(".se-pre-con").show();
            $("#search_field").hide();
        },
        url: "http://example.com/Search_Results.php",
        dataType:"html",
        data: {"search_term": str},
        method: "post",
        async: false,
        success: function(data){
            if(data !== null) {
                $("#search_default").hide();
                $("#search_results_wrapper").html(data);
            }
            $(".se-pre-con").fadeOut("slow");
            $("#search_field").show();
            $("#search_field").focus();
        },
        error: function(){
            $(".se-pre-con").fadeOut("slow");
            $("#search_field").show();
            $("#search_field").focus();
        }
    });        
}
});

Answer 1

我找到了解决方案。

溶液

当我删除该选项时，它开始工作：

async: false