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>

但是，您应该在 焦点或更改或蓝色时 重置标记 load_img为 false 输入的>以及 length = 0时也是如此，因此 flag不能仅绑定(bind)到 true当用户输入关键字时它变为 true。

重置标志

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

希望这有帮助。