Обработчик jQuery ajaxError() срабатывает, если пользователь покидает страницу до завершения загрузки страницы

StackOverflow https://stackoverflow.com/questions/1906023

  •  19-09-2019
  •  | 
  •  

Вопрос

Мы используем глобальный обработчик ajaxError() jQuery, чтобы предупреждать пользователя о любых сбоях AJAX:

$(document).ajaxError(function() {  
    $("There was a network or server error. Please try again later.").dialog({  
        title: "Error",  
        modal: true,  
        resizable: false,  
        buttons: { 'Ok': function() { (this).dialog("close"); } }  
    });  
});

К сожалению, этот глобальный обработчик ошибок также срабатывает, если пользователь покидает страницу до ее завершения.Вот шаги для воспроизведения ошибки:

  1. Пользователь посещает страницу А, которая содержит элементы, загружаемые через AJAX.
  2. Элементы AJAX на странице А начинают загружаться.
  3. Пользователь нажимает ссылку, чтобы посетить страницу Б. до Элементы AJAX на странице A завершили загрузку.
  4. Диалоговое окно с ошибкой появляется ненадолго, прежде чем браузер перенаправит на страницу B.

Есть идеи, как мы можем заставить ajaxError() не срабатывать, когда ошибка непосредственно вызвана посещением пользователем новой страницы?

ОБНОВЛЯТЬ:Вот мой код сейчас, после включения предложений в комментариях:

// I added a 3 second delay to our error dialog, enough time
// for the user to leave for a new page:
$(document).ajaxError(function() {
    setTimeout(my_error_handler, 3000);
});

// Warn user before leaving page if AJAX is still loading.
// Not sure I'll keep this:
$(document).ajaxStart(function() {
    ajaxing = true;
});

$(document).ajaxStop(function() {
    ajaxing = false;
});

window.onbeforeunload = function() {
    if (typeof(ajaxing) != 'undefined' && ajaxing) {
        return "Page elements are still loading!";
    }
};
Это было полезно?

Решение

Ну да, если пользователь перейдет на другую страницу, xhr прервется, что, по сути, является неудачной связью.Решением было бы зарегистрировать прослушиватель для onbeforeunload событие и отвязать ajaxError там, по сути говоря:пользователь собирается покинуть страницу, поэтому я не хочу получать информацию о возможных ошибках ajax.

Однако некоторые сайты, например GMail, делают наоборот:если вы попытаетесь уйти со страницы, пока еще есть некоторые ожидающие запросы ajax, вы получите сообщение о том, что у вас все еще работают некоторые процессы, и позволит пользователю решить, оставаться ли на сайте до завершения запроса. или пойти дальше и уйти.

Другие советы

Основываясь на ответе Дэвида Хедлунда выше, вот код, который работает для меня:

//enable global ajax error handling
$(document).ajaxError(function (event, request, settings) {
    //your error handling code here
});

//user leaving page so ignore any unfinished ajax loads
$(window).bind('beforeunload', function () {
    $(document).unbind('ajaxError');
});

Я получил 'ajaxError' спецификация из раздела комментариев Документация jquery ajaxError.мне пришлось связать beforeunload к $(window) для поддержки Chrome (IE нормально работал с документом). .ajaxError не стрелял, когда я привязывался к $(window) вот почему у меня есть это решение для окна/документа.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top