сделать эти функции JavaScript более переносимым

Question

Мне не хватает фундаментального понимания управления потоком функций JavaScript ...

Я создал слайдшоу jquery. Шоу разбито на логические разделы, каждый раздел управляется функцией (позволяет легко добавлять разделы позже) ...

function myslideshow() {
    section1();
    section2();
    section3();
}

В каждом разделе есть несколько функций, состоящих из операторов jquery, анимации, хронометража ... так что, может быть ...

function section1() {
    firstPart();
    setTimeout('secondPart()',5000);
    setTimeout('thirdPart()',6000);
}

Теперь вот моя проблема ... Я хочу определить функции "firstPart (), secondPart (), thirdPart ()" внутри section1 (). Я хочу сделать это по разным причинам:

1. Каждый раздел может логически иметь свои «части»
2. Переносимость раздела

Так что я бы хотел сохранить раздел и все его соответствующие части внутри раздела.

Я не могу заставить его работать ... когда я определяю "части" внутри раздела, все функции запускаются одновременно.

так в идеале я бы хотел получить:

function section1() {
    firstPart();
    setTimeout('secondPart()',5000);
    setTimeout('thirdPart()',6000);

    function firstpart(){  
         //some code here
    }

    function secondPart(){  
         //some code here
    }

    function thirdPart(){  
         //some code here
    }

}

Но опять же, это не работает должным образом; на самом деле это работает правильно, я просто не реализую это должным образом! Не уверен, нужно ли мне использовать обратные вызовы функций (даже не уверен, как настроить это «масштабируемым образом»).

Еще одна область для улучшения: setTimeouts используются для гарантии того, что secondPart запускается после firstPart ... интересно, есть ли лучшие способы "ждать" для выполнения предыдущей функции (с анимацией jquery).

Я ценю любое направление, которое вы можете предложить. Спасибо!

Answer 1

Вы неправильно вызываете "setTimeout ()":

setTimeout(secondPart, 5000);

Это передаст ссылку на вашу локальную функцию.Когда вы передаете строку, система времени выполнения оценивает ее , когда таймер отключается , в глобальном контексте.Таким образом, он не найдет вашу локальную функцию.

Что касается вашего последнего вопроса, большинство (если не все) подпрограмм анимации jQuery допускают передачу функции в качестве последнего аргумента.Функция запускается после завершения анимации.Опять же, в таких случаях вы должны передать ссылку на вашу функцию, а не строку, содержащую выражение вызова функции.(Я сомневаюсь, что это все равно будет работать с jQuery.)

Answer 2

Не уверен, отвечаю ли я на правильный вопрос, но я нахожу шаблон модуля простым способом настройки пространства имен и структуры объектов:

http://www.yuiblog.com/blog/2007/06/12/module-pattern/

Итак, поместите любые функции в возвращаемое вами, которое вы собираетесь сделать общедоступным, а остальные - частными. Что-то вроде:

    var s1 = function Section1() {
        function firstpart(){  //Private and auto-execute
             //some code here
        }();

        function secondPart(){  
             //some code here
        }
        function thirdPart(){  
             //some code here
        }

        return { //Public stuff
            secondPart:secondPart,
            thirdPart:thirdPart
        };
    }();

    setTimeout(s1.secondPart, 5000);
    setTimeout(s1.thirdPart, 6000);

Answer 3

Один из подходов - создать список анонимных «частей» и просто вызвать их последовательно из управляющей функции.Последний обратный вызов для каждого списка анимации будет вызывать следующую часть в последовательности.Вот пример:

var Section1 = {
  index: 0,

  nextPart: function () {
    if (Section1.index < parts.length) {
      parts[Section1.index++]();
    }
  },

  parts: [
    // Part 1
    function () {
      $('.example').animate({
        // stuff
      }).animate({
        // stuff
      }).animate({
        // stuff
      }, Section1.nextPart);
    },

    // Part 2
    function () {
      $('.example').animate({
        // stuff
      }).animate({
        // stuff
      }).animate({
        // stuff
      }, Section1.nextPart);
    },
  ] 
};

В этом примере я создал модуль Section1 , и вы бы вызвали Section1.nextPart () , чтобы запустить последовательность анимации.

Обратите внимание, что ваша проблема с таймерами по-прежнему относится к самим разделам: вы также хотите, чтобы Section2 ожидал завершения работы Section1, что означает, что вам потребуется эта же самая структура снова для управления разделами.Полагаю, действительно ли это имеет смысл, зависит от того, насколько важно разбить эти разделы.