Узнайте, как прервать вызовы ajax, чтобы предотвратить перекрытия.
AJAX, другими словами, асинхронный JavaScript и XML - это веб-технология нового поколения, которая позволяет создавать асинхронные запросы на стороне клиента.
Приведенный ниже код - очень простой пример выполнения вызова AJAX без обновления страницы. Есть кнопка. Когда вы нажимаете кнопку, выполняется асинхронный вызов.
Код генерирует идентификатор от 1 до 10. Затем отправьте этот идентификатор в службу. Сервисы возвращают данные пользователя, которые мы сгенерировали случайным образом. Наконец, мы помещаем изображение полученного пользователя на нашу страницу. Выглядит это так:
Вы можете видеть, когда мы нажимаем на кнопку, загружается фотография пользователя. Делаем все асинхронно.
На данный момент с этой асинхронной структурой все выглядит хорошо. Но проблемы также начинаются с этой асинхронности.
Что произойдет, если вы нажмете кнопку несколько раз очень быстро?
Это будет так:
Вы можете видеть, что даже если мы перестали нажимать кнопку, она продолжит загрузку изображений. Потому что, когда мы щелкаем, он создает асинхронный вызов, а когда мы щелкаем, щелкаем и снова щелкаем, он создает новые вызовы. Статус всех предыдущих вызовов ожидает, и они выполняются в соответствии с их ответом со стороны сервера.
Чтобы безопасно использовать асинхронные службы, мы должны быть уверены, что если есть запрос, сделанный ранее, мы должны прервать предыдущий запрос. Потому что мы делаем новый запрос, и теперь нет необходимости обрабатывать предыдущий. В противном случае можно увидеть некоторые побочные эффекты, как в нашем примере.
Во-первых, мы должны передать запрос AJAX в переменную:
Теперь мы можем обработать запрос. Запрос AJAX также является экземпляром объекта XMLHttpRequest. Теперь мы можем использовать его функции, чтобы проверить текущее состояние и прервать предыдущий запрос.
После обновлений наших кодов, как указано выше, теперь мы отменяем предыдущие незавершенные запросы и создаем совершенно новый, свежий запрос.
Вы можете видеть, что новая версия нашего вызова AJAX выглядит так:
Вы можете видеть, когда мы последовательно нажимаем несколько раз, предыдущие запросы отменяются и выполняется только последний.
Теперь вы можете безопасно выполнять вызовы AJAX без каких-либо побочных эффектов.
