Почему тайм-аут ожидания ответа сервера не работает нормально?

Question

[Vadim Rublev]

После установки тайм-аута ожидания ответа сервера перестала работать форма в браузере. Запрос нормально уходит на сервер; и сервер нормально отвечает. Но клиент ответ не принимает нормально.
С событиями onload и onloadend вообще не работает - после отправки запроса тупо стоит форма на месте (т. е. ничего на клиенте не происходит). С событием onreadystatechange работает некорректно - срабатывает сразу, и после истечения тайм-аута ещё.
Как правильно записать? С событием onload или onloadend. Устаревшее onreadystatechange не хочется использовать.

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    // При неуспешном ответе - завершаем процесс запроса.
    if (xhr.readyState != 4) {
        return;
    } else {
    // (Иначе) При успешном ответе (readyState = 4) - очищаем отсчёт тайм-аута.
        clearTimeout(xhrTimeout);
    }

    // Отсчёт тайм-аута.
    let xhrTimeout = setTimeout(function() {
        xhr.abort()
        alert('Истек тайм-аут ожидания ответа сервера.');
    }, 5000);

    if (xhr.status === 200) {
        _функционал при успешном ответе сервера_
        return;
    } else {
        _функционал при неуспешном ответе сервера_
        return;
    }
}

// При неудачном запросе (нет ответа сервера, по любой причине)
xhr.onerror = function() {
    alert("Запрос не удался.");
}

xhr.open('POST', '/testRout', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send("id_Name=" + encodeURIComponent(value_Input1) + "&id_Nick=" + encodeURIComponent(value_Input2));   // Отправка запроса.

Comments

[Надим]

Вы криво ставите таймаут, в этом проблема. Я сейчас не у компа, но если завтра напомните о себе, набросаю вам рабочий пример.

[Vadim Rublev]

А что именно не так? Набросайте.. )

Answer 1

[Александр Черемхин]

let xhr = new XMLHttpRequest();

    // Отсчёт тайм-аута вынести из обработчика
let xhrTimeout = setTimeout(function() {
        xhr.abort()
        alert('Истек тайм-аут ожидания ответа сервера.');
 }, 5000);

xhr.onreadystatechange = function() {
    // выключить тайм-аут 
    clearTimeout(xhrTimeout);

    // При неуспешном ответе - завершаем процесс запроса.
    if (xhr.readyState != 4) {
        return;
    } 

    if (xhr.status === 200) {
        _функционал при успешном ответе сервера_
        return;
    } else {
        _функционал при неуспешном ответе сервера_
        return;
    }
}
....

Comments

[Vadim Rublev]

onreadystatechange заменить на onload или на onloadend (на что лучше)?
Так и не могу понять между ними разницу.

[Александр Черемхин]

xhr.onload = function() {...

Здесь все коротко и доступно
https://learn.javascript.ru/xmlhttprequest

[Vadim Rublev]

Спасибо! C load работает (с readystatechange - нет, кстати, но мне оно и не надо).

Статью читал, но как-то проморгал... Теперь ясно с событиями. )

[Vadim Rublev]

...Забыли точку с запятой после xhr.abort() , кстати.

Answer 2

[eRKa]

Наверное потому, что clearTimeout(xhrTimeout) срабатывает раньше, чем проинициализируется xhrTimeout и на клиенте падает с ошибкой.
Александр Черемхин Вам правильно написал, сначала инициализация xhrTimeout, а потом только вызов.