javascript - 在 javascript/jQuery 中取消带有外部事件的函数

Question

我遇到的情况是，我们在用户下载时逐渐向他们展示越来越高质量的图像。

逻辑是这样的:

3 种图像格式:低质量 (5-8kb)、大 (60-80kb)、高分辨率 (150-250kb)。

1. 检查是否缓存了大图或高分辨率照片，如果是的话，只需最初显示缓存的版本并完成。
2. 如果不加载低质量图像并立即显示给用户。
3. 预缓存大图像并在加载后更改 img.src。
4. 检查用户窗口大小是否超过特定阈值，预缓存高分辨率图像并在加载时更改 img.src。

一切都很好。

但是在高分辨率下载期间，如果用户点击转到下一张图片，当然一切都会搞砸，因为我们已经设置了一个事件，在加载上一张高分辨率图片时发生加载。

本质上，onload 事件是在用户点击进入下一张图片后发生的，这意味着新图片将被旧图片替换。

我需要做的是能够在用户切换到下一张照片时取消该功能。

函数看起来像这样:

(function(index){
        $(highresimage).imagesLoaded(function(){
                    setTimeout(function(){
                        self.cache.image = $(highresimage).appendTo(self.cache.imagewrap);
                        self.cache.photos[index]['highresloaded'] = true;
                        setTimeout(function(){
                        self.cache.imagewrap.children('img').first().remove();
                        self.cache.image.css({
                            'left':'',
                            'position':'relative'
                        });
                        },10);
                    },200);
        });
})(index);

所以我需要能够以编程方式取消 $(highresimage).imagesLoaded(function(){});

实现此目标的最佳方法是什么？

提前致谢。

编辑:请注意，在我的示例中，我们实际上是在克隆图像、更改 src、将其添加到 dom、保留几毫秒然后删除旧图像。这是由于 Firefox 中的一个错误，该错误会在更改高分辨率图像的 src 时导致闪烁。可怕的是，删除丑陋的超时会使 ​​Firefox 用户的体验变得更糟。他们在那里是有原因的。 :P

Answer 1

如果您将setTimeout 保存在一个变量中，您可以使用clearTimeout 来取消它。理论上，应该中止图像的加载。

var timeout = setTimeout(do_something, 1000); // create

clearTimeout(timeout); // cancel

看了the source code of imagesLoaded()之后，我找不到任何允许你取消该功能的东西，这有点令人失望:(