Javascript scoping performance suggestions when using a custom callback

Question

I have a small question regarding scoping when i use a custom callback function passed to jQuery.animate(). Consider the code below.

;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));

When i log the function context in the repositionPageNav callback i get a undefined, ideally i would have the context reference the element clicked on, as jQuery itself ussualy do. I could do this by changing the callback call to WebApi.scrollTo as follows:

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

By creating the closure the context inside the callback now refers to the element clicked as i intended but does this hurt performance? And 1 thing i cannot get my head around is why in the first example the context is undefined? Is it because i don't call the callback as callback.call(context)? Any suggestions/ideas?

Many Thanks,

Nick.

Bergi · Accepted Answer · 2013-02-19 16:59:11Z

1

The this keyword acts more like a context, it is not the [variable] scope.

However, the problem seems more that you are instantly calling the repositionPageNav function (in both versions), instead of passing a callback function. If you would do so, the this will reference the DOM element the animation was called on.

answered Feb 19, 2013 at 16:59

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ngr Over a year ago

Ah context. I'll make sure to remember that. In the above examples doesn't the passed callback wait with execution until the animate() is finished?

Bergi Over a year ago

As said, you do not pass any callback. You call the function immediately and pass the result (undefined).

ngr Over a year ago

So by passing it in as repositionPageNav($pageNav, $(this)) it calls it immediately? Perhaps passing jQuery.proxy(repositionPageNav, context, arguments) would be better suitable.

Bergi Over a year ago

Yes, proxy (or native bind) would.

Collectives™ on Stack Overflow

Javascript scoping performance suggestions when using a custom callback

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related