Сделайте что-нибудь с элементом $ (this) через определенное время

Question

У меня есть формы с вводом «datapicker» .... и это раздражает, что я не вижу ошибок ввода, потому что входы имеют атрибут «только для чтения».

Итак, у меня есть этот код:

$('p.send-app-btn input[type="submit"]').on('click', function(){
$('input').each(function(){
if ( $(this).is('[readonly]') && $(this).prop('required') && !$(this).val()) {
    $(this).removeAttr('readonly');

if($(this).is(':focus') && $(this).hasClass('hasDatepicker')){
  setTimeout(function () {
$(this).attr('readonly','readonly');
}, 1500);  
}
}
})
});

и он работает хорошо, потому что он удаляет атрибут «только для чтения» из $(this) ввода и отображается ошибка ввода.Но мне бы хотелось, чтобы через 1,5 с (после устранения ошибки) сфокусированный ввод снова был «только для чтения».

Но эта часть кода не работает, потому что я не могу поймать $(this) - как можноЯ делаю это по-другому?

if($(this).is(':focus') && $(this).hasClass('hasDatepicker')){
      setTimeout(function () {
    $(this).attr('readonly','readonly');
    }, 1500);  
    }

Надеюсь, это понятно.:)

Answer 1

Вы можете передать this в качестве параметра функции setTimeout -

setTimeout(function(_this) {
  _this.attr('readonly','readonly');
}, 1500, $(this)); 

Answer 2

С помощью @ Ulrich-dohou я нашел решение для этого:

$('input').each(function(){
if ( $(this).is('[readonly]') && $(this).prop('required') && !$(this).val()) {
    $(this).removeAttr('readonly');
    setTimeout(() => {
$(this).attr('readonly','readonly');
},1500)
}
})

Просто мой код проверил $(this).is(':focus') в момент нажатия кнопки отправки.Это было достаточно, чтобы проверить это немного поздно (достаточно 1 с), и это работает хорошо.Спасибо за ответы!

Answer 3

Вы можете просто добавить $(this) к переменной или просто использовать функцию стрелки, если ваш браузер поддерживает ES6 . Другой пример - вы создаете функцию, которая будет обрабатывать действие за вас.

Пример 1

if($(this).is(':focus') && $(this).hasClass('hasDatepicker')){
    const input = $(this);
    setTimeout(function () {
      input.attr('readonly', true);
    }, 1500);  
}

Пример 2

if($(this).is(':focus') && $(this).hasClass('hasDatepicker')){
    setTimeout(() => {
      $(this).attr('readonly', true);
    }, 1500);  
}

Пример 3

function disabeInput(element){
    element.attr('readonly', true);
}
if($(this).is(':focus') && $(this).hasClass('hasDatepicker')){
    setTimeout(() => {
      disabeInput($(this));
    }, 1500);  
}