StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POFunction variable closure
text
Body
copied!<p>Here is a simple slider code and I wanted to understand how the variable function closure is working...</p> <pre><code>(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); </code></pre> <p>In this part:</p> <pre><code> $('#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); }); </code></pre> <p>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?</p> <p>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?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload