Jquery ajax 搜索加载动画不会停止



我写了以下代码来通过ajax进行搜索。当触发密钥时,会在 500 毫秒后发出 ajax 请求。但是搜索动画不会停止(hide()方法)。

$('#mainsearch .searchinput').keyup(function(e) {
    if (e.which !== 0) {
        var searchval = $(this).val().trim();
        if(aSearch[searchval]) {
            $('#mainsearch #sugbox #sugres').html(aSearch[searchval]);
        }else if(prevs !== searchval) {
            prevs = searchval;
            clearTimeout($.data(this, 'timer'));
            var wait = setTimeout(function() {search(searchval)}, 500);
            $(this).data('timer', wait);
        }
    }
});
function search(searchval) {
    console.log("searching for "+searchval)
    if(lastrequest && lastrequest.readystate != 4){ // abort past requests
        lastrequest.abort();
        lastrequest = null;
        delete lastrequest;
        $('#mainsearch #finding').hide();
    }
    if(searchval != "") { // make an ajax call
    lastrequest = $.ajax({
        url:"/ajaxsearch.php?key_word="+searchval,
        type: "GET",
        dataType:'json',
        cache:true,
        beforeSend:function() {
            $('#mainsearch #finding').delay(400).show(0);
        },
        complete: function(jqXHR, status){
            console.log('complete');
            $('#mainsearch #finding').hide();
        },
        success:function(result){
            $('#mainsearch #finding').hide();
            if(result.length > 0 ) {
                var outp = searchParse(result);
                $('#mainsearch #sugbox #sugres').html(outp);
                aSearch[searchval] = outp;
            } else 
            $('#mainsearch #sugbox #sugres').html('<li><a href="#"> Not Found </span></a></li>');
            $('#mainsearch #finding').hide();
        },
        error : function (xhr, ajaxOptions, thrownError) {
                $('#mainsearch #finding').hide();
        }
    });
}
}

我在搜索中得到了想要的结果,没有错误。 但hide()并没有隐藏动画。但是,输入$('#mainsearch #finding').hide();会隐藏动画。

注意:这里#mainsearch #finding是一个由css3动画的div。

消除延迟 我认为 Ajax 的回报速度比延迟快......

     $('#mainsearch #finding').delay(400).show(0);
     $('#mainsearch #finding').show(0);

最新更新