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 - 对象，而不是实际的#second - 元素......

除此之外，如果超时为0，是否可以让“链”更进一步？因此，如果我们有以下场景，则只有在计时器结束时才会添加该类：

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

Answer 1

这与链接无关链接意味着在方法的返回值上调用其他jQuery方法。（$(...).wait(...).somethingElse()）。
您的方法已经支持链接，因为它返回this（通过this.each()，它本身是可链接的。）

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

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

Answer 2

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

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

在jQuery函数中返回this`，具有正确（保留）的可链接性

2 个答案: