Question

我在输入字段旁边有一个加载程序，当输入字段检索keyup事件时，该加载程序会进行trigerred。这就像我想要的那样，但每次启动keyup事件时，加载器似乎都会闪烁。

我的意思是它会眨眼，因为它会超时回到原来的状态。我知道事件处理程序是有效的。但是，即使它检索到keyup事件，如何处理blinkin'加载程序以使其旋转？

HTML： -

<div class="col-sm-4">
     <input type="text" name="nip" class="form-control" id="nip" placeholder="NIP" autocomplete="off">
</div>
<div class="col-sm-4 check">
      <span id="pesan"></span>
</div>

jQuery的： -

$("#nip, #nis").keyup(function(){
    $("#pesan").html('<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i> <span class="font-periksa animated infinite flash">Memeriksa Data</span>')
.fadeIn(600);
});

Answer 1

为防止闪烁，我只会在#pesan HTML为空时设置。

$("#nip, #nis").keyup(function(){

  if($("#pesan").html() == ""){
    $("#pesan").html('<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i> <span class="font-periksa animated infinite flash">Memeriksa Data</span>')
      .fadeIn(600);
  }

});

如果你必须删除微调器的其他代码（可能是ajax完成）不能完全删除HTML，而是设置另一个内容......添加or条件：

$("#nip, #nis").keyup(function(){

  if($("#pesan").html() == "" || $("#pesan").html() == "Other content"){
    $("#pesan").html('<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i> <span class="font-periksa animated infinite flash">Memeriksa Data</span>')
      .fadeIn(600);
  }

});

Answer 2

你似乎在使用Bootstrap 一种方法是通过让你的HTML像这样：

<div class="col-sm-4 check">
    <span id="pesan" class="hidden">
        <i class="fa fa-spinner fa-spin fa-2x fa-fw"></i> <span class="font-periksa animated infinite flash">Memeriksa Data</span>
    </span>
</div>

然后，在您的代码上，您可以这样做：

var $pesan = $("#pesan");
$("#nip, #nis").keyup(function(){
    if($pesan.not(":visible"))
    {
        if($pesan.hasClass("hidden"))
        {
            $pesan.css("display", "none").removeClass("hidden");
        }
        $pesan.fadeIn(600);
    }
});

removeClass就在那里，所以你只需要使用Bootstrap提供的类hidden。如果您使用style="display:none"，则可以简化代码。

现在一起：

var $pesan = $("#pesan");
$("#nip, #nis").keyup(function(){
    if($pesan.not(":visible"))
    {
        if($pesan.hasClass("hidden"))
        {
            $pesan.css("display", "none").removeClass("hidden");
        }
        $pesan.fadeIn(600);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="col-sm-4">
    <input type="text" name="nip" class="form-control" id="nip" placeholder="NIP" autocomplete="off">
</div>
<div class="col-sm-4 check">
    <span id="pesan" class="hidden">
        <i class="fa fa-spinner fa-spin fa-2x fa-fw"></i> <span class="font-periksa animated infinite flash">Memeriksa Data</span>
    </span>
</div>

密钥执行时加载程序闪烁

2 个答案: