[yaparoff]

Есть таблица с данными. Когда мы ее скроллим и подходим к нижней границе выполняется аякс-запрос. Так мы получаем ответ и рендерим следующие поля.
Это работает, но может быть такой момент: пользователь скроллил до конца таблицы, начался запрос, и пока этот запрос не пришел, пользователь может и дальше скроллить таблицу вниз. И тогда получается отправляется уже два запроса (или более) вместо одного. 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());

  }
}