Показывать сообщение перед обновлением страницы с помощью jQuery

Question

Я хочу отобразить сообщение результата ajax перед обновлением страницы, но что-то не так. Мой код выглядит так:

$.ajax({ 
    cache: false, 
    type: "POST", 
    url: "@(Url.RouteUrl("DummyRequest"))", 
    success: function (data) { 
     if (data.Success) { 
      $('#dummy-notification').text(data.Result).fadeIn("slow").delay(3000).fadeOut("slow"); 
      setInterval(function() { 
       location.reload(); 
      }, 5000); 
     } 
     else { 
      $('#dummy-notification').text(data.Result).fadeIn("slow").delay(3000).fadeOut("slow"); 
      /*setInterval(function() { 
       location.reload(); 
      }, 5000);*/ 
     } 
    }, 
    error: function (xhr, ajaxOptions, thrownError) { 
     $('#dummy-notification').text("Something went wrong.").fadeIn("slow").delay(3000).fadeOut("slow"); 
    } 
}); 

Мой код работает нормально на еще ситуации. Когда я попытаюсь, появится сообщение, а затем через 5 секунд перезагрузится сама страница. Но когда если ситуация включена, страница перезагружается сама, однако сообщение не отображается.

Как я могу решить эту проблему?

Answer 1

Это зависит от времени отклика сервера .. так что если ответ с сервера задерживается, то не работает правильно. Поэтому вам нужно ждать ответа AJAX, тогда вам нужно отобразить всплывающее окно и перенаправить. поэтому используйте параметр ajax async: false в вашем запросе ajax. как указано ниже

$.ajax({ 
    cache: false, 
    async: false, 
    type: "POST", 
    url: "@(Url.RouteUrl("DummyRequest"))", 
    success: function (data) { 
     if (data.Success) { 
      $('#dummy-notification').text(data.Result).fadeIn("slow").delay(3000).fadeOut("slow"); 
      setInterval(function() { 
       location.reload(); 
      }, 5000); 
     } 
     else { 
      $('#dummy-notification').text(data.Result).fadeIn("slow").delay(3000).fadeOut("slow"); 
      /*setInterval(function() { 
       location.reload(); 
      }, 5000);*/ 
     } 
    }, 
    error: function (xhr, ajaxOptions, thrownError) { 
     $('#dummy-notification').text("Something went wrong.").fadeIn("slow").delay(3000).fadeOut("slow"); 
    } 
}); 

Answer 2

попробовать что-то вроде этого:

$('#dummy-notification').text(data.Result).fadeIn("slow").delay(3000).fadeOut("slow", function() { 
    setTimeout(function() { 
     location.reload(); 
    }, 5000); 
}); 

Разница заключается в том, что setTimeout() не будет вызываться только после fadeOut() завершения выполнения.