javascript - 在超时时设置jquery加载器(window.setTimeout)

我的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" />

最佳答案

为了方便演示，将图像更改为文本。

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>