JavaScript 停止事件流

Question

我正在尝试为图像创建幻灯片。实际上它更像是一个淡入淡出的表演。

我可以解释整个事情，但我认为如果我只发布我的代码会更清楚。

var Images = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg"]
var ImageContainer = $("#Images");
var Image = $("<img />");
var Counter = 0;

var Animate = {
    Start: function() {
        var that = this;
        Image.attr("src", Images[Counter]);
        ImageContainer.append(Image.fadeIn(that.Middle()));
    },

    Middle: function() {
        var that = this;
        setTimeout(function() {
            that.End();
        }, 2000);
    },

    End: function() {
        var that = this;
        Image.fadeOut(function() {
            Counter = Counter + 1;
            that.Start();
        })
    }
}

Animate.Start();

$("#Button").click(function() {
    //Stop the animation; //Change counter value; //Start animation
});

所以我的主要问题是:如何执行停止、更改和启动功能。我的第二个问题是:这是链接事件的好方法吗？我之前尝试过其他方法，但它们很快就会变丑。我也不是真正的 JavaScript 专家，所以我的示例中可能有一些非常奇怪的代码。像 var that = this; 这样的代码让我觉得我做错了。

Answer 1

看完this你将能够回答你自己的问题。您可以使用 call 或 apply 替换 var that = this;(已经有很多关于它的文档和问题)。