为什么我的 EventListener 被调用两次？

Question

在我的 Angular 移动应用程序 (Ionic framework) 中，我正在设置我的无限滚动功能。它与仪表板版本的代码基本相同，但我的 scrollTagsPanel 被调用了两次。

getTagsFactory 在我的 getTagsFactory 中，我执行 API 调用并检索返回标签对象，然后我将标签传递到 tagsPanelDirective:

中的 getTagsColHeight 函数

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

tagsPanelDirective

这里是唯一负责无限滚动的 2 个方法。 getTagsColHeight 检查以确保 tags 数组不为空，然后它只是将事件 scroll 添加到函数 scrollTagsPanel.

确定标签列 tagsCol 的高度是否达到与其高度相匹配的点的计算在 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();
        }
    }
}

哪个滚动步骤产生 2 个具有完全相同数据的调用：

我 console.log(event) 我看到 1 Event {} 和 1 CustomEvent {}，这有帮助吗？

UPDATE - 好的，如果我点击该列，我可以让事件首先发生一次，所以我猜它在我滚动时同时检测到点击和滚动？

下面，我滚动了一次，然后点击了两次：

Answer 1

var timeout;

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

根据：

添加 AngularJS 版本：

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

为什么我的 EventListener 被调用两次？

Why is my EventListener getting called twice?

javascript

addeventlistener

dom-events

infinite-scroll

angularjs