Spinning значок на 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> 

Теперь значок прядения показывает, когда я начинаю поиск, но он показывает новый значок everyti я нажимаю клавишу, и я просто хочу, чтобы она показывалась 1 раз. У кого-нибудь есть идея о том, как достичь этого?

Answer 1

я в конце концов «решил» это таким образом:

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); 
    }); 

Answer 2

Используйте временный класс для обнаружения первого поиска.

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