набор 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(); 

Таким образом, вы уверены, что данные действительно изменились