Save the date! Join us on October 16 for our Product Ops launch event. Register here.
Jul 21, 2020 04:56 PM
Hi,
I’m using Airtable-js to build a website using my Airtable as a source.
Because my table has 800 records, I’ve added a click event before fetching more pages of my table, but fetchNextPage is behaving strangely. Instead of fetching regular blocks (my page limit is 36), each request seems to be multiplied by two, thus first it works, then it returns a duplicate block, and eventually it bloats to the point of hanging.
Check the code below. You can see eachPage renders more cards whenever I hit the bottom of the page.
function updateTable () {
table.select({
maxRecords: 800,
pageSize: 36,
view: "Grid view",
filterByFormula: filterDefault,
sort: sortDefault}
).eachPage(function page(records, fetchNextPage) {
records.forEach(function(record) {
var rc = record.fields;
var $dataContainer = $('#data-container');
var $cardAlign = $('<div class="d-flex align-items-stretch col-xs-12 col-sm-6 col-md-4 col-lg-2" data-toggle="modal" data-target="#myModal" />');
if(rc.Centuries){var cent = 'c' + rc.Centuries.join("")} else {var cent = ""};
var $galleryCard = $('<div class="card mx-auto ' + cent + '" />');
$($galleryCard).attr('id', record.id);
var $picture = $('<picture />');
if (rc.Image) {
$('<img class="card-img-top" />').attr('src', rc.Image[0].url).appendTo($picture);
}
var $label = $('<div class="card-body" />').text(rc.Nome);
$galleryCard.append($picture);
$galleryCard.append($label);
$cardAlign.append($galleryCard);
$dataContainer.append($cardAlign);
});
$(window).on('scroll', function(){
var scrollHeight = $(document).height();
var scrollPos = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPos) / scrollHeight == 0) {
fetchNextPage();
}
});
}, function done(err) {
if (err) { console.error(err); return; }
});
}
Solved! Go to Solution.
Jul 21, 2020 05:13 PM
That code example is a little complicated, so getting it to run locally would take a fair amount of work. Although some folks may have the bandwidth to give it a shot, it’s possible that their attempt to recreate your problem would be different in some subtle way, and that would interfere with their ability to diagnose the problem.
In general, I’d recommend trying to reduce example code as much as possible. If it really requires certain dependencies (e.g. it looks like that script uses jQuery), then be sure to share exactly which version of the dependency is in use (that might be important, too).
Having said that, I can offer a guess about the problem. The code binds to the window’s scroll
event, but it never unbinds. So when the user scrolls to the bottom of the screen for the very first time, the fetchNextPage
function will be invoked, and the event handler will remain active. When the request completes and the API invokes your page
function, it will eventually bind a second handler for the window’s scroll
event. Now, with two event handlers waiting for the user to reach the bottom of the page, things are likely to go a little haywire.
One solution may be to unbind the current event handler each time the user scrolls to the bottom of the page:
-$(window).on('scroll', function(){
+$(window).on('scroll', function onScroll(){
var scrollHeight = $(document).height();
var scrollPos = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPos) / scrollHeight == 0) {
fetchNextPage();
+ $(window).off('scroll', onScroll);
}
});
Jul 21, 2020 05:13 PM
That code example is a little complicated, so getting it to run locally would take a fair amount of work. Although some folks may have the bandwidth to give it a shot, it’s possible that their attempt to recreate your problem would be different in some subtle way, and that would interfere with their ability to diagnose the problem.
In general, I’d recommend trying to reduce example code as much as possible. If it really requires certain dependencies (e.g. it looks like that script uses jQuery), then be sure to share exactly which version of the dependency is in use (that might be important, too).
Having said that, I can offer a guess about the problem. The code binds to the window’s scroll
event, but it never unbinds. So when the user scrolls to the bottom of the screen for the very first time, the fetchNextPage
function will be invoked, and the event handler will remain active. When the request completes and the API invokes your page
function, it will eventually bind a second handler for the window’s scroll
event. Now, with two event handlers waiting for the user to reach the bottom of the page, things are likely to go a little haywire.
One solution may be to unbind the current event handler each time the user scrolls to the bottom of the page:
-$(window).on('scroll', function(){
+$(window).on('scroll', function onScroll(){
var scrollHeight = $(document).height();
var scrollPos = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPos) / scrollHeight == 0) {
fetchNextPage();
+ $(window).off('scroll', onScroll);
}
});
Jul 21, 2020 05:33 PM
That was it. The handler was being re-attached multiple times, and therefore, invoked multiple times. Thank you!