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>

现在我开始搜索时会显示旋转图标，但每按一次键就会显示一个新图标，我只想让它显示一次。有人知道如何实现这个目标吗？

Answer 1

使用temp class检测首次搜索。

$('#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')
}

Answer 2

我最终以这种方式解决了这个问题：

function loadIcon(){
        $('#loading-indicator').show();
    }


var counterIcon = 0;
     $('#json_search').keyup(function() {
        if($('#json_search').val() == '') {
            $('#loading-indicator').hide();
            counterIcon = 0;
        }
        counterIcon++;
        clearTimeout(timeoutP);

        if(counterIcon = 1) {
            setTimeout(loadIcon, 100);
        }
        timeoutP = setTimeout(searchItem, 2000);
     });

在JQuery setTimeout上旋转图标

2 个答案: