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

Question

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

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

我的HTML:

<template name="ImageGallery">
    {{#each galleryImages}}
        {{#if viewingImage}}
            {{> Image}}
        {{/if}}
    {{/each}}
</template>

<template name="Image">
    <div class="image-in-gallery">LOADING</div>
</template>

检查用户想要看到的"图像" 是否是我们在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)我不知道如何打破.

有人可以帮忙吗？

Answer 1

我认为您的代码有两个缺陷：

1. load当您的模板被销毁时，您永远不会删除您的事件。因此，即使您的模板因单击获取下一张图像而被销毁，该图像仍会加载到您的浏览器中并且事件load会启动。被销毁的元素 removeEventListener

2. 您正在使用$您的onRendered. $指的是全局 DOM，而this.$只会查找模板的本地 DOM。如果你使用了this.$它，它应该会抛出一个错误，因为你的本地 DOM 被破坏了，并且不会显示错误的图像。

这就是我要做的： https://github.com/darkship/ImageGallery