为什么我的事件监听获取调用两次？ [英] Why is my EventListener getting called twice?

问题描述

在我的角度移动应用程序（离子框架），我设置了我的无限滚动功能。它基本上是相同的code作为仪表板的版本可是我的 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 检查，以确保该标记数组不为空，那么它只是将事件滚动给函数 scrollTagsPanel 。

的计算，以确定是否标记柱的高度 tagsCol 已经达到匹配它的高度在 scrollTagsPanel 。

 函数getTagsColHeight（标签）{
    如果（tags.length！= 0 || tags.length！=未定义）{
        $超时（函数（）{
            tagsCol.addEventListener（滚动，scrollTagsPanel）;
        }）;
    }
}功能scrollTagsPanel（事件）{
    //达到标签面板底部：
    的console.log（'tagsCol高度：'，tagsCol.offsetHeight）;
    的console.log（'滚动点：（tagsCol.scrollHeight  -  tagsCol.scrollTop））;    如果（（tagsCol.scrollHeight  -  tagsCol.scrollTop）=== tagsCol.offsetHeight）{
        如果（！vm.limitReached）{            使用VM.start + = vm.limit;
            vm.tagsLoaded = FALSE;            如果（（使用VM.start + vm.limit）GT; vm.totalTags）{
                vm.limitReached = TRUE;
                的console.log（'vm.limitReached =真！，vm.limitReached）;
            }            的console.log（'scrollTagsPanel ...'）;
            loadTags（）;
        }
    }
}
 

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

我的console.log（事件），我看到1 事件{} 1 自定义事件{} ，这是否帮助？

---

更新 - ？好吧，我可以得到该事件第一次只有一次，如果我点击列，所以我想这是检测一个点击，同时滚动，当我滚动

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

解决方案

  VAR超时;tagsCol.addEventListener（滚动，函数（）{
    clearTimeout（超时）;
    超时= setTimeout的（函数（）{
        scrollTagsPanel（）;
    }，50）;
}）;
 

据： http://stackoverflow.com/a/22018607/636478

---

添加AngularJS版本：

  tagsCol.addEventListener（滚动，函数（）{
    $ timeout.cancel（vm.scrollEventTimer）;
    clearTimeout（vm.scrollEventTimer）;
    vm.scrollEventTimer = $超时（函数（）{
        scrollTagsPanel（）;
    }，50）;
}）;
 

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:

解决方案

var timeout;

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

According to: http://stackoverflow.com/a/22018607/636478

---

Adding the AngularJS version:

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

这篇关于为什么我的事件监听获取调用两次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！