javascript - JQuery setTimeout 上的旋转图标

Question

我在搜索框中有一个幻灯片，要搜索我调用此函数的产品:

$('#json_search').keyup(function(){
    clearTimeout(timeoutP);
    $('#search-resultlist').append('<li class="testicon"><i class="fa fa-2x fa-spinner fa-spin"></i></li>');
    timeoutP = setTimeout(searchItem, 1000);

});

这只是调用一个加载部分 html 页面的函数:

var searchItem = function() {
    if($('#json_search').val())
    {
        $('#search-resultlist').load('/search/quick/q/'+ $('#json_search').val() );
    }
    else {
        $('#search-resultlist').html('');
    }
}

HTML:

<div class="right-searchcontent" >
                <input type="text" class="form-control" placeholder="Search ... " id="json_search">
             </div>
             <div class="right-searchresult">
                 <ul id="search-resultlist" >
                     <li >

                     </li>
                </ul>
             </div>

现在，当我开始搜索时会出现旋转图标，但每次我按下一个键时它都会显示一个新图标，我只希望它显示 1 次。有人知道如何实现这一点吗？

Answer 1

使用临时类检测首次搜索。

$('#json_search').keyup(function(){
    clearTimeout(timeoutP);
    if (!$(this).hasClass('sameClass')){
    $('#search-resultlist').append('<li class="testicon"><i class="fa fa-2x fa-spinner fa-spin"></i></li>');
    }
    timeoutP = setTimeout(searchItem, 1000);

});

var searchItem = function() {
    if($('#json_search').val())
    {
        $('#search-resultlist').load('/search/quick/q/'+ $('#json_search').val() );
    }
    else {
        $('#search-resultlist').html('');
    }
    $('#json_search').addClass('sameClass')
}