紡紗圖標的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我按了一個鍵，我只想讓它出現一次。 任何人都有如何實現這個想法？

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