Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.08.2019, 10:08
Аспирант
Отправить личное сообщение для yaparoff Посмотреть профиль Найти все сообщения от yaparoff
 
Регистрация: 26.04.2016
Сообщений: 94

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

  }
}
Ответить с цитированием
  #2 (permalink)  
Старый 16.08.2019, 10:33
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,439

Сообщение от yaparoff
А так быть не должно. Как победить это?
А ты не отправляй второй запрос пока не получил ответа на первый...
Ответить с цитированием
  #3 (permalink)  
Старый 16.08.2019, 13:57
Аспирант
Отправить личное сообщение для yaparoff Посмотреть профиль Найти все сообщения от yaparoff
 
Регистрация: 26.04.2016
Сообщений: 94

Вот в этом и вопрос. Как это сделать? Хотел сделать промисами - не получилось
Ответить с цитированием
  #4 (permalink)  
Старый 16.08.2019, 14:01
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,439

Сообщение от yaparoff
Как это сделать?
Каждый это делает по-разному...

Можно закрывать страницу полупрозрачным ДИВом и "сыпать песок", пока не получишь первый ответ...
Можно иметь некую статус-переменную и если она "показывает", что запрос отправлен и ответа нет - не слать следующие...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
gulp.watch повторяет действие многократно, вместо одного раза guava Сборка проекта, утилиты 3 25.10.2015 15:44
Несколько запросов Ajax kenguru111 jQuery 1 04.02.2015 01:55
вместо одного конкретного элемента работают все Garri Элементы интерфейса 9 17.05.2013 21:29
2 клика, вместо одного Harvey jQuery 2 24.02.2012 15:18
OneShowHide.js jQuery раскрываются сразу все списки вместо одного Yatsenco Элементы интерфейса 3 10.09.2010 14:13