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