0

当我使用传递给 jQuery.animate() 的自定义回调函数时，我有一个关于范围界定的小问题。考虑下面的代码。

;var WebApi = (function projectInit (WebApi, $, Modernizr, window, document, undefined) {

    $(element).on('click.skiptodocumentpart', function skipToDocumentPart (e) {
        WebApi.scrollTo(
            $(this.getAttribute('href')).offset().top, 
            1000, 
                $pageNav.length ? repositionPageNav($pageNav, $(this)) : null
        );
        return false;
    });

    function repositionPageNav ($pageNav, $elm) {
        console.log(this); // undefined
    };

    WebApi.scrollTo = function (yPos, iSpeed, callback) {
        $('html,body').animate({ 
            scrollTop : yPos 
        },{ 
            duration : typeof iSpeed === 'number' ? iSpeed : 1000, 
            complete : typeof callback === 'function' ? callback : null
    });
};

return WebApi;

}(WebApi || {}, jQuery, Modernizr, this, this.document));

当我在 repositionPageNav 回调中记录函数上下文时，我得到一个未定义的，理想情况下，我会让上下文引用单击的元素，就像 jQuery 本身通常所做的那样。我可以通过将回调调用更改为 WebApi.scrollTo 来做到这一点，如下所示：

WebApi.scrollTo(
        yPos, 
        1000, 
        as$pageNav.length ? (function (scope) {
                return repositionPageNav.call(scope, $pageNav);
            }(this)) : null
        );

通过创建闭包，回调中的上下文现在指的是按我的意图单击的元素，但这会损害性能吗？我无法理解的一件事是为什么在第一个示例中上下文未定义？是因为我没有将回调称为 callback.call(context) 吗？有什么建议/想法吗？

非常感谢，

缺口。

4

1 回答 1

1

this关键字更像是一个上下文，它不是[变量]范围。

但是，问题似乎更多是您立即调用repositionPageNav函数（在两个版本中），而不是传递回调函数。如果您这样做，this 将引用调用动画的 DOM 元素。

于 2013-02-19T16:59:11.957 回答