超时时设置 jquery 加载程序 (window.setTimeout)

Question

现在我的 jQuery 文件中具有以下功能：

var timer;
var delay = 1500; // 1,5 second delay after last input

$("#qr_data").bind("input", function (e) {
    window.clearTimeout(timer);
    timer = window.setTimeout(function(){
        // get qr code data
        var qr_data = $('#qr_data').val();

        var data = getVCardData(qr_data);

        $("#helpqrcode").modal("hide");


    }, delay);
});

如您所见，我延迟了 1.5 秒。我可以在 1.5 秒时显示图像加载器吗？在我的 HTML 中，我有这样一张图片：

<img id="loading" style="display:none; width:200px;" alt="loader" src="recourses/imgs/loader.gif" />

Answer 1

为了演示方便，将图片改为文字。

var timer;
var delay = 1500; // 1.5 second delay after last input

$("#qr_data").bind("input", function (e) {
    window.clearTimeout(timer);
  
    // When user stop input, show the image here.
    $("#test").show();
  
    
    timer = window.setTimeout(function(){
        // When the time is 1.5 second after last input, hide the image.
        $("#test").hide();
      
        // get qr code data
        var qr_data = $('#qr_data').val();
        console.log(qr_data);
        
        
    }, delay);
});

#test {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" id="qr_data" />
<div id="test">Typing</div>

Answer 2

您必须显示加载图像，当 change 事件触发时您必须隐藏它：

$("#qr_data")
  .one( 'change', function() {
    $('#loading').hide();
    // do stuff with the value of qr_data
  });
$('#loading').show();

所以你确定数据真的被改变了

超时时设置 jquery 加载程序 (window.setTimeout)

set jquery loader when timeout (window.setTimeout)

javascript

jquery

image

delay

loader