первый пост здесь 🙂
У меня есть мобильное приложение (Phonegap), которое отправляет запрос ajax на сервер PHP, скажем, приглашение друга. При получении запроса необходимо выполнить несколько действий (создать ссылки, авторизацию, отправить электронную почту и т. Д.), Что занимает много времени (5 секунд). В течение этого времени пользователь приложения смотрит на счетчик, ожидая завершения запроса ajax.
В идеале:
В приложении:
$.ajax({
url: 'http://www.my_site.com/action.php',
type: 'POST',
data: "my_guid="+my_guid+"&friend_guid="+friend_guid,
dataType: 'json',
success: function(json) {
// Send confirmation
},
error: function(json) {
// Show error
}
}
На сервере (PHP):
$my_guid = $_POST['my_guid'];
$friend_guid = $_POST['friend_guid'];
// return here confirmation to the app
veryLongFunction($my_guid,$friend_guid); //continue executing long function
Просто, не показывай счетчик.
Это асинхронно в любом случае
Только не показывай счетчик. Сам запрос является асинхронным. Пользователь может продолжать использовать страницу, пока запрос ожидает ответа в фоновом режиме. Только когда ответ получен, включается обработчик успеха.
Альтернативный отзыв
Таким образом, вместо показа наложения счетчика, я бы показал небольшое уведомление в верхней части страницы с надписью «Сохранение …», что-то, что не слишком сильно мешает зрению, может быть, даже просто маленькая иконка или анимация в в углу или в верхней части кнопки, которую они нажали (см. фрагмент ниже), чтобы выполнить действие.
Затем, когда ответ получен, отображается более заметное уведомление, указывающее на успех или ошибку.
Обработка навигации
Отход от страницы завершит запрос. Это не означает, что PHP-скрипт завершается сразу же, но если вы начнете выводить информацию и отправлять ее клиенту, ваш сервер заметит, что соединение разорвано, и уничтожит PHP-скрипт. Вы можете предотвратить это и заставить PHP завершить запрос, используя ignore_user_abort (правда).
Незначительные детали: пока сохраняется приглашение в друзья, вы не сможете увидеть его, поэтому, если вы перейдете на другую страницу, на которой также есть кнопка приглашения в друзья, сложно сделать так, чтобы это показывало правильный статус. Одним из решений может быть установка флага «сохранение», как только вы начнете сохранять приглашение, но лично я бы не пошел так далеко. Просто убедитесь, что ваш скрипт изящно обрабатывает дубликаты сохранения и скрывает столкновение от пользователя.
Прототип встроенного индикатора
Вот небольшой фрагмент, чтобы показать, что я имею в виду, показав его в строке. Это не делает фактический запрос, но моделирует его, используя setTimeout
, Вы можете нажать каждую кнопку, и вы можете продолжить использовать страницу. Вместо того, чтобы показывать большой счетчик, я просто показываю текст в кнопке, которую вы только что нажали, чтобы вы знали, какой запрос на дружбу вы сохраняете.
Таким образом, пользователь получает больше отзывов (точное имя, которое сохраняет), отзыв менее навязчивый (он только там, где кнопка больше не должна нажиматься), и вы можете показать ответ в том же месте, или выберите, чтобы показать уведомление (или оба).
$('button').on('click', function(){
// Button is clicked. Disable and show an indicator.
var button = $(this);
button.prop('disabled', true);
button.text('saving...');
// Simulate the request that takes 5 seconds.
setTimeout(
function(){
// Simulate success
button.text('Saved!');
button.css('color', 'green');
}, 5000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>John <button>Send friend request</button>
<li>Jane <button>Send friend request</button>
<li>Jack <button>Send friend request</button>
<li>Janet <button>Send friend request</button>
Других решений пока нет …