Question

我已经编写了以下代码，可以通过ajax进行搜索。当键被触发时，在500ms后发出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。

Answer 1

带走延迟，我认为ajax的回报速度比延迟快......

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

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

1 个答案: