Textarea с изменением с задержкой

Question

Я хотел бы сканировать QR-коды со сканером. У меня уже есть сканер, и когда я помещаю фокус в скрытую текстовую область, он помещает текст в текстовое поле при сканировании QR-кода.

Я хотел бы что-то сделать с данными, выводимыми в конкретном текстовом поле. Теперь у меня есть в моем JQuery следующее:

$("#qr_data").bind("input", function (e) { 
    console.log(e); 
}); 

Проблема заключается в том, что загрузка QR-данных в моей текстовое поле занимает 2 секунды или около того. Таким образом, функция вызывается как 20 раз .... Мне нужны только последние данные, поэтому я могу что-то с этим сделать. Как я могу это сделать?

Answer 1

// we will build a new event 
// once for initing a new event "lastchange" 
$("textarea").each(function() { 
    var timer = null; 
    $(this).change(function(){ 
     var node = this; 
     if(timer != null) 
      clearTimeout(timer); 

     timer = setTimeout(function(){ 
      $(node).trigger('lastchange'); 
     }, 1000); 
    }); 
}); 


// use custom event 
$("textarea#qr_data").bind("lastchange", function (e) { 
    console.log($(this).val(), e); 
}); 

Answer 2

Привет, что бы я сделал, это привязка к событию изменения и отсрочка функции как 500 мсек каждый раз, когда она срабатывает. Как будто вы создаете автоматическое полное поле ввода, и вы не хотите запускать запрос ajax на каждое нажатие клавиши.

var qr_timeout = null; 
$("#qr_data").change(function(){ 
    if(qr_timeout != null) 
     clearTimeout(qr_timeout); 

    qr_timeout = setTimeout(function(){ 
     //Do your magic here 
    }, 500); 
}); 

Таким образом, вам не придется беспокоиться, если нагрузка будет принимать 1,2 или даже 10 секунд