Question

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

getTagsFactory 在我的getTagsFactory内部，我执行API调用并检索标记对象，然后将标记传递到getTagsColHeight内的tagsPanelDirective函数：

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 {}，这有帮助吗？

更新 - 好的，如果我点击列，我可以先将事件放到第一位，所以我猜它会在滚动的同时检测到点击并滚动？

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

Answer 1

var timeout;

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

根据：https://stackoverflow.com/a/22018607/636478

添加AngularJS版本：

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

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

1 个答案: