StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This solution uses closures and recursion.</p> <pre><code>var SlideChanger = function(seconds_each) { var index = -1; // on the first cycle, index will be set to zero below var maxindex = ($(".change_link").length) - 1; // how many total slides are there (count the slide buttons) var timer = function() { // this is the function returned by SlideChanger var logic = function() { // this is an inner function which uses the // enclosed values (index and maxindex) to cycle through the slides if (index == maxindex) index = 0; // reset to first slide else index++; // goto next slide, set index to zero on first cycle $('.slideshow').blinds_change(index); // this is what changes the slide setTimeout(logic, 1000 * seconds_each); // schedule ourself to run in the future } logic(); // get the ball rolling } return timer; // give caller the function } SlideChanger(5)(); // get the function at five seconds per slide and run it </code></pre> <p>What we are doing here is exposing the inner function <code>timer</code> outside of the function in which it was defined (<code>SlideChanger</code>). This function (<code>timer</code>) has access to the variables defined inside of <code>SlideChanger</code> (<code>index</code> and <code>maxindex</code>). </p> <p>Now that we have set up the variables in the enclosing environment and a function to return to the caller, we can set up the logical engine in <code>logic</code>. When <code>logic</code> is run, it uses <code>index</code> and <code>maxindex</code> to determine which slide should be shown next, shows the slide, and schedules itself to be run again in the future. </p> <p>When called, the returning function calls <code>logic</code> to get the ball rolling. Then <code>logic</code> repeats indefinitely by scheduling itself to run in the future each time it is run.</p> <p>So, to summarize, we call <code>SlideChanger</code> with a numeric argument <code>x</code>. It returns a function that, after being called, will change the slide every <code>x</code> seconds.</p> <p>Another way to write the same concept.</p> <pre><code>(function(seconds_each) { var index = -1; // on the first cycle, index will be set to zero below var maxindex = ($(".change_link").length) - 1; // how many total slides are there (count the slide buttons) return function() { // this is the function returned by SlideChanger var logic = function() { // this is an inner function which uses the // enclosed values (index and maxindex) to cycle through the slides if (index == maxindex) index = 0; // reset to first slide else index++; // goto next slide, set index to zero on first cycle $('.slideshow').blinds_change(index); // this is what changes the slide setTimeout(logic, 1000 * seconds_each); // schedule ourself to run in the future } logic(); // get the ball rolling } })(5)(); // get the function at five seconds per slide and run it </code></pre> <p>JavaScript is a nice language with many functional programming constructs such as higher order functions (functions that either create functions or accept functions as parameters) and anonymous functions. For more info see <a href="http://www.ibm.com/developerworks/web/library/wa-javascript.html" rel="nofollow">http://www.ibm.com/developerworks/web/library/wa-javascript.html</a></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