Добавьте класс, если опрос ajax занимает больше x секунд

Question

Я хочу добавить класс (этот класс помещает счетчик на вход, но это не проблема), когда опрос ajax занимает более x секунд (вероятно, 1500 мс).Я пытался с setInterval, а затем, когда опрос заканчивается, я закрываю интервал.Но это не запустилось.

Я использую jquery для вызова ajax и использую свойство "async: false", это может быть проблемой?Если я удаляю это, мой код работает не очень хорошо, поэтому мне нужен ajax опрос "sync".

Вот мой код:

function calcvat(){
    message_timer = setTimeout(function(){ 
     $('.js-vatinput').addClass('changing');
     }, 1000);

    if(isValidVAT()){ //In this function is the ajax
     ....
    }
}

function isValidVAT(){
...
$.ajax({
    data: {...},
    type: "POST",
    dataType: "json",
    async: false, //This could be the problem?
    url: url,
  }).done(function( data, textStatus, jqXHR ) {
    ...
    $('.js-vatinput').removeClass('changing');
    clearInterval(message_timer);
    message_timer = false;
}
....
    }

Спасибо за ваше время!

Answer 1

Да, проблема async: false.Используя async: false, вы заставляете браузер приостанавливать основной поток пользовательского интерфейса, пока выполняется вызов ajax. Нет Обновления пользовательского интерфейса будут разрешены, нет может выполняться другой код JavaScript и т. Д., Пока не завершится вызов ajax.

async: false никогда не будет правильным.В лучшем случае это делает в любом случае плохой UX (по крайней мере, он замораживает вкладку, а также, возможно, другие связанные вкладки; в старых браузерах [например, IE8] он заморозил весь пользовательский интерфейс браузера).

Удалите async: false и (исходя из вашего кода) просто отключите отправку формы / выполнение действия, частью которого является эта проверка, в то время как вместо этого ожидается ожидание вызова Ajax.

---

Примечание 1: 1,5 секунды - этодолго гадать, что-то происходит.Предложить отзыв в течение 250 мс;немедленная обратная связь обычно лучше.

Примечание 2: Я предполагаю, что message_timer где-то объявлено.:-) Если нет, код становится жертвой того, что я называю Ужас неявных глобалов , и вы захотите где-то объявить, что обе эти функции имеют к нему доступ(но не в идеале глобально).