如果有更改,如何中断eventListener？

我创建了自己的小图像滑块,为了让加载器工作,我必须创建一个addEventListener然后将加载的图像附加到DOM中.

但是,在这种情况下存在一个错误:当图像需要一段时间加载并且用户在加载之前点击它以查看下一个图像时,事件监听器仍然在后台工作,并且当图像完全时加载它会覆盖用户当前正在查看的内容.

我的HTML:

检查用户想要看到的"图像" 是否是我们在each迭代中遇到的图像(从而显示它):

Template.ImageGallery.helpers({
    viewingImage: function() {
        var self = this
        var galleryImages = Template.parentData().galleryImages
        var renderImage = false
        var viewing = Template.instance().viewingImage.get()
        var posOfThisImage = lodash.indexOf(galleryImages, self)
        if (viewing === posOfThisImage) {
            renderImage = true
        }
        return renderImage
    }
})

允许用户查看下一个"图像"并在我们结束时循环:

Template.ImageGallery.events({
    'click .click-to-see-next-image': function(event, template) {
        var viewing = template.viewingImage.get()
        var imageCount = this.galleryImages.length
        var nextImage = ++viewing
        if (nextImage < imageCount) {
            template.viewingImage.set(nextImage)
        }
        else {
            template.viewingImage.set(0)
        }
    }
})

装载机:

Template.Image.onRendered({
    var imageUrl = Template.currentData().name + Template.parentData().name + '.jpg'
    var imageObj = new Image()
    imageObj.src = imageUrl

    imageObj.addEventListener('load', function() {
        $('.image-in-gallery').empty()
        $('.image-in-gallery').append($(imageObj))
    }
})

你可以看到问题所在:在empty()和append()课程的覆盖用户当前正在查看的图像,并将其设置为任何旁边装.

我想在函数中以某种方式添加一个断点,addEventListener以查看加载的图像是否实际上是用户想要看到的图像.但是有两个问题:

1)该ReactiveVar模板中没有该变量.Session毕竟我需要使用变量吗？

2)我不知道如何打破.

有人可以帮忙吗？