jQuery - 在鍵盤上僅顯示一次加載圖像

Question

我有一個keyup函數來搜索表中的數據。我想讓加載圖像只出現一次。例如，如果用戶輸入"one"，圖像將只顯示一次，直到顯示結果。

我可以在keyup函數上顯示圖像，但它會根據用戶類型顯示。例如，如果用戶輸入"one"，圖像將出現3次。下面是我的代碼示例中，

$("#search").keyup(function(){ 
    var search = $("#search").val(); 
    $("#loading").fadeIn(500); 
    $.post('search_pr.php', 
    { 
     search : search 
    }) 
    .done(function(data){ 
     $("#loading").fadeOut(500); 
     $("#body").html(data); 
    }); 
}); 

Answer 1

的狀態，您可以使用標誌爲此，

$(function(){ 
 
var load_img = false; 
 
$("#search").keyup(function(){ 
 
    var search = $("#search").val(); 
 
    
 
    if(!load_img) { 
 
     $("#loading").show();  
 
    } 
 
    load_img = search.length === 0 ? false : true; 
 
    
 
    if(search.length === 0){ 
 
    $("#loading").hide(); 
 
    } 
 

 
    // Rest of your code goes here 
 

 
    }); 
 
});

#loading{ 
 
    display:none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="search" placeholder="search"> 
 
<div id="loading"> 
 
<i class="fa fa-spinner fa-spin"></i> 
 
    </div>

但是，您應該 復位該標誌上 輸入的 focusout or change or blue和 load_img到 假當 length = 0爲好，以便 標誌不能結合到僅 true當它成爲真正 當用戶鍵入關鍵字。

復位標誌

$("#search").on("change",function(){ 
    load_img = false; 
}); 

希望這有助於。

Answer 2

使用全局變量設置附加元素

var isTriggered = 0 

$("#search").keyup(function(){ 
    if (isTriggered == 0) { 
    isTriggered = 1; 
    var search = $("#search").val(); 
    $("#loading").fadeIn(500); 
    $.post('search_pr.php', 
    { 
     search : search 
    }) 
    .done(function(data){ 
     $("#loading").fadeOut(500); 
     $("#body").html(data); 
    }); 
} 
});