Why is my EventListener getting called twice?

Question

In my Angular mobile app (Ionic framework), I'm setting up my infinite scroll functions. It's basically the same code as the dashboard version yet my scrollTagsPanel gets called twice.

getTagsFactory Inside my getTagsFactory I do an API call and retrieve back tag objects, then I pass the tags into the getTagsColHeight function inside of tagsPanelDirective:

tagsPanelCtrl.tagsPanel.totalTags = data.data.ticker_tags_rows;
tagsPanelCtrl.tagsPanel.tagsLoaded = true;
tagsPanelCtrl.tagsPanel.getTagsColHeight(tagsPanelCtrl.tagsPanel.tags);

tagsPanelDirective

Here are the only 2 methods responsible for the infinite scroll. getTagsColHeight checks to make sure that the tags array is not empty, then it simply adds the event scroll to the function scrollTagsPanel.

The calculation to determine if the height of the tags column tagsCol has reached a point that matches it's height is in scrollTagsPanel.

function getTagsColHeight(tags) {
    if (tags.length != 0 || tags.length != undefined) {
        $timeout(function() {
            tagsCol.addEventListener('scroll', scrollTagsPanel);
        });
    }
}

function scrollTagsPanel(event) {
    // Reached bottom of tags panel:
    console.log('tagsCol height: ', tagsCol.offsetHeight);
    console.log('scrolled point: ',(tagsCol.scrollHeight - tagsCol.scrollTop));

    if ((tagsCol.scrollHeight - tagsCol.scrollTop) === tagsCol.offsetHeight) {
        if (!vm.limitReached) {

            vm.start += vm.limit;
            vm.tagsLoaded = false;

            if ((vm.start + vm.limit) > vm.totalTags) {
                vm.limitReached = true;
                console.log('vm.limitReached = true!', vm.limitReached);
            }

            console.log('scrollTagsPanel...');
            loadTags();
        }
    }
}

What scroll step produces 2 calls with the exact same data:

I console.log(event) and I see 1 Event {} and 1 CustomEvent {}, does this help?

---

UPDATE - ok I can get the event to first just once if I click on the column, so I guess it's detecting a click and scroll at the same time when I scroll?

Below, I scrolled once, and then clicked twice afterwards:

Solomonsolon

I think it could depend on your mouse / touchpad. Check it: https://mcmap.net/q/812968/-window-scroll-events-triggering-twice – Vaso

@Vaso whoa! lol I did not think that would work, but it did! :D perhaps because I'm working inside of the Ionic mobile app framework, that's why it gets called twice there and not in the desktop dashboard browser version, hmmm.. want to post the answer? You can copy his, I converted it into an Angular $timeout version. – Solomonsolon

Answer 1

var timeout;

tagsCol.addEventListener('scroll', function () {
    clearTimeout(timeout);  
    timeout = setTimeout(function() {
        scrollTagsPanel();
    }, 50);
});

According to: https://mcmap.net/q/812968/-window-scroll-events-triggering-twice

---

Adding the AngularJS version:

tagsCol.addEventListener('scroll', function () {
    $timeout.cancel(vm.scrollEventTimer);
    clearTimeout(vm.scrollEventTimer);
    vm.scrollEventTimer = $timeout(function() {
        scrollTagsPanel();
    }, 50);
});

Vaso