Это решение использует замыкания и рекурсию.
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
То, что мы здесь делаем, - это раскрытие внутренней функции timer
вне функции, в которой она была определена (SlideChanger
). Эта функция (timer
) имеет доступ к переменным, определенным внутри SlideChanger
(index
и maxindex
).
Теперь, когда мы настроили переменные в окружающей среде и функцию для возврата к вызывающей стороне, мы можем настроить логический механизм в logic
. Когда запускается logic
, он использует index
и maxindex
, чтобы определить, какой слайд должен быть показан следующим, показывает слайд и планирует сам запуск в будущем.
При вызове возвращающая функция вызывает logic
, чтобы заставить мяч двигаться. Затем logic
повторяется бесконечно, составляя расписание для запуска в будущем при каждом запуске.
Итак, для подведения итогов мы вызываем SlideChanger
с числовым аргументом x
. Возвращает функцию, которая после вызова будет изменять слайд каждые x
секунды.
Еще один способ написать ту же концепцию.
(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
JavaScript - хороший язык со многими функциональными конструкциями программирования, такими как функции высшего порядка (функции, которые создают функции или принимают функции в качестве параметров) и анонимные функции. Для получения дополнительной информации см http://www.ibm.com/developerworks/web/library/wa-javascript.html