Конечная точка вызывается дважды в бесконечной прокрутке - PullRequest
Новая
       23

Конечная точка вызывается дважды в бесконечной прокрутке

1 голос
/ 10 апреля 2019

Я использую Meta Fizzy Infinite Scroll , чтобы использовать указанный контейнер в качестве контейнера бесконечной прокрутки.У меня две кнопки, одна кнопка имеет другую конечную точку, чем вторая кнопка.При нажатии на одну из кнопок заполняется контейнер бесконечной прокрутки.

<button data-api="/api/comments/1">First button</button>
<button data-api="/api/comments/2">Second button</button>

<div class="comments-container"></div>

Допустим, пользователь нажимает первую кнопку, а затем нажимает вторую кнопку.Впервые мы обычно вызываем функцию infinitescroll.При втором нажатии кнопки мы уничтожаем первый экземпляр и сбрасываем контейнер бесконечной прокрутки таким же образом, как и предыдущий экземпляр. 

    function CreateInfiniteScroll(endPoint) {

        let $container = $(endPoint.getFeedContainer()).infiniteScroll({
            path: function () {
                return endPoint.getEndPoint();
            },
            // load response as flat text
            responseType: 'text',
            status: '.scroll-status',
            history: false,
        });


        $container.on('load.infiniteScroll', function (event, response) {
            let data = JSON.parse(response);
            console.log(data);
     }
  }

Когда нажимается вторая кнопка, я запускаю следующий код: 

                $(".comments-container").infiniteScroll('destroy');
                $(".comments-container").removeData('infiniteScroll');
CreateInfiniteScroll(new EndPoints(buttonEndpoint, ".comments-container"));

Тем не менее, происходит то, что я получаю дублированные сообщения при втором нажатии кнопки.Вывод на консоль происходит дважды, хотя я вызываю функцию только один раз.Что происходит?Как сделать так, чтобы infiniteScroll обнулялся на 100%?

1 Ответ

2 голосов
/ 10 апреля 2019

Вы подписываетесь дважды на один и тот же элемент, смотрите эту часть: 

$container.on('load.infiniteScroll', function (event, response) {
  let data = JSON.parse(response);
  console.log(data);
});

Это означает, что каждый раз, когда вы вызываете CreateInfiniteScroll, обработчик события load.infiniteScroll добавляется в div с классом .comments-container. Вы можете удалить другие обработчики событий перед повторным подключением новых обработчиков событий, как в функции CreateInfiniteScroll: 

$container.off('load.infiniteScroll'); // Remove all event handlers first
$container.on('load.infiniteScroll', function (event, response) {
  let data = JSON.parse(response);
  console.log(data);
});

Или вы можете добавить его к своему коду нажатия кнопки: 

// Clean up
$(".comments-container").infiniteScroll('destroy');
$(".comments-container").removeData('infiniteScroll');
$(".comments-container").off('load.infiniteScroll'); // remove all other events handlers

// Reinstantiate infinite scroll
CreateInfiniteScroll(new EndPoints(buttonEndpoint, ".comments-container"));

Подробнее о .off функции JQuery здесь .

...