Есть таблица с данными. Когда мы ее скроллим и подходим к нижней границе выполняется аякс-запрос. Так мы получаем ответ и рендерим следующие поля.
Это работает, но может быть такой момент: пользователь скроллил до конца таблицы, начался запрос, и пока этот запрос не пришел, пользователь может и дальше скроллить таблицу вниз. И тогда получается отправляется уже два запроса (или более) вместо одного.
http://skrinshoter.ru/s/150819/KTx2FgnP
А так быть не должно. Как победить это?
Я сделал большой таймаут (более 3 сек), когда данные отправляются на сервер. И это частично решает проблему, но не полностью. Ведь может возникнуть ситуация когда запрос от сервера может идти больше 3 сек и тогда за это время отправиться еще один такой же запрос.
Вот упрощенный вариант моего кода
class Table() {
constructor() {
this.tableAjaxContent = document.querySelector('.table__ajax-content');
this.tableAjaxBox = document.querySelector('.table__ajax-box');
this.timer = 0;
}
_checkFetchingData() {
this.currentEmptyBox = document.querySelector('.table__ajax-box--empty');
const bottomCoord = this.tableAjaxContent.getBoundingClientRect().bottom;
const documentHeight = document.documentElement.clientHeight;
if (documentHeight >= bottomCoord) {
clearTimeout(this.timer);
this._showTablePreloader();
this.timer = setTimeout(() => {
this._fetchDataOnScroll(dataObj);
}, 3300); // сделал большой таймаут, но это не всегда может спасти
}
}
_fetchDataOnScroll(recievedObj) {
const nextpageUrl = this.currentEmptyBox.dataset.nextpage;
const ajaxObj = { PAGEN_1: nextpageUrl };
$.ajax({
type: 'POST',
url: '/rate-book/',
data: ajaxObj,
success: (response) => this._renderFetchedData(response),
error: (xhr) => {
console.log('Возникла ошибка: ' + xhr.responseCode);
// this._showTableErrorPreloader();
}
});
}
_renderFetchedData(response) {
console.log(response);
this._hideTablePreloader();
// $(this.currentEmptyBox).remove();
this.tableAjaxBox.innerHTML += response;
}
init() {
window.addEventListener('scroll', () => this._checkFetchingData());
}
}