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

您必须显示加载图片，当$("#qr_data") .one( 'change', function() { $('#loading').hide(); // do stuff with the value of qr_data }); $('#loading').show();事件被触发时，您必须隐藏它：

ANDROID_HOME :- C:\Users\shasak.sengar\AppData\Local\Android\sdk

所以你确实知道数据真的发生了变化

超时时设置jquery加载器（window.setTimeout）

2 个答案: