Question

Here is a simple slider code and I wanted to understand how the variable function closure is working…

(function($) {
var sliderUL = $('div.slider').css('overflow', 'hidden').children('ul'),
    imgs = sliderUL.find('img'),
    imgWidth = imgs[0].width, // 600
    imgsLen = imgs.length, // 4
    current = 1,
    totalImgsWidth = imgsLen * imgWidth; // 2400

$('#slider-nav').show().find('button').on('click', function() {
    var direction = $(this).data('dir'),
        loc = imgWidth; // 600

    // update current value
    **( direction === 'next' ) ? ++current : --current;
    // if first image
    if ( current === 0 ) {
        current = imgsLen;
        loc = totalImgsWidth - imgWidth; // 2400 - 600 = 1800
        direction = 'next';
    } else if ( current - 1 === imgsLen ) { // Are we at end? Should we reset?
        current = 1;
        loc = 0;
    }
    transition(sliderUL, loc, direction);**
});

function transition( container, loc, direction ) {
    var unit; // -= +=

    if ( direction && loc !== 0 ) {
        unit = ( direction === 'next' ) ? '-=' : '+=';
    }

    container.animate({
        'margin-left': unit ? (unit + loc) : loc
    });
}

})(jQuery);

In this part:

    $('#slider-nav').show().find('button').on('click', function() {
    var direction = $(this).data('dir'),
        loc = imgWidth; // 600

    // update current value
    ( direction === 'next' ) ? ++current : --current;

    // if first image
    if ( current === 0 ) {
        current = imgsLen;
        loc = totalImgsWidth - imgWidth; // 2400 - 600 = 1800
        direction = 'next';
    } else if ( current - 1 === imgsLen ) { // Are we at end? Should we reset?
        current = 1;
        loc = 0;
    }

    transition(sliderUL, loc, direction);
});

In the if ( current === 0) block, are the variables current, loc, and direction updated after being changed in the first block, then they are passed to the transition function below?

I take it that if the else if ( current – 1 === imgsLen ) is true, then current and loc are write over the previous values assigned to them, to then be passed into the transitions function?

Answer 1

direction and loc are defined in the scope of your callback function for ‘click’. They are initialized every time you call that callback function — at every click. direction is initialized by the ‘data-dir’ associated to the button and loc is initialized to the current value of imgWidth (which is a variable defined in the scope of your main function).

After being initialized, direction and loc can be modify by your if-else if logic and they are then passed to the function transition(). (Note that sliderIU is also passed to transition(), but it is not necessary since it has the scope of your main function and it could be used directly within transition() without being passed as parameter container. However it might not be a bad idea to pass it as a parameter since it makes for clearer programming style when you can see from the arguments of a function on which values it is acting.)

The variable current which is used in the callback-click function is not defined in the scope of that callback-click function but has the main function scope (defined at the start of the main function). This is necessary because you want to change its value –and remember the change– each time the button is clicked. The callback-click function is a closure since it has access (read+write) to the external variable current. The variables direction and loc have nothing to do with closures; they are just variables that you pass to a function.