jQuery函数中的“`return this`”，具有正确(保留)的链接性

Question

我需要一个等待函数，从下面开始：

var delay = (function() {
    return function(callback, ms) {
        setTimeout(callback, ms || 1000);
    };
})();

delay(function() {
    $('#foo').animate({
        height: 180
    }, 1000);
});

然后移植到jQuery：

jQuery.fn.wait = function(callback, seconds) {
    return this.each(function() {
        return setTimeout(callback, seconds || 1000);
    });
};

$('#second').wait(function() {
    $('#second').addClass('foo'); // works well
});​

最终在混乱中结束：

$('#second').wait(function() {
    $(this).addClass('foo'); // `this` will not work here
});​

...我最后一个实例化的问题在哪里，或者更好的是我该如何修复它？this在这里查看window-object，而不是实际的#second-element...

除此之外，如果超时为0，是否有可能让“链”走得更远？因此，如果我们有以下场景，则仅当计时器结束时才会添加类：

$('#second').wait().addClass('foo');

Answer 1

this没有为您提供所需元素的原因是因为您试图在没有设置上下文的函数中使用它，请尝试

jQuery.fn.wait = function(callback, seconds) {
    return this.each(function() {
        var self = this
        return setTimeout(function(){
                   callback.call(self);
               }, seconds || 1000);
    });
};

Answer 2

这与链式无关。

链接意味着在方法的返回值上调用额外的jQuery方法。($(...).wait(...).somethingElse())。

您的方法已经支持链接，因为它返回this (通过this.each()，它本身是可链接的)。

您正在询问如何使用特定的this值调用回调：

var self = this;
callback.call(self);