Coffeescript для перебора массива слов на странице?

Question

У меня есть массив слов, которые я хочу перебрать на странице, чтобы повернуть существующее слово, а новое слово повернуть.

Я использую animate.css для обработки анимации путем добавления и удаления класса.

Начальный div имеет входной класс .rotateIn и, таким образом, анимируется при визуализации страницы.Он также имеет класс .animated, который должен присутствовать для запуска анимации.

После двухсекундной задержки я добавляю класс анимации выхода .rotateOut, затем удаляю входкласс, который затем запускает анимацию выхода.На этом этапе div скрыт.

Я изменяю текст, затем добавляю класс входа, затем удаляю класс выхода, вызывая анимацию входа.

Как только я нажму последнее слово вВ массиве функция останавливается.

Какой лучший способ написать это в coffeescript, чтобы я мог настроить время между входом и выходом?

РЕДАКТИРОВАТЬ: вот некоторыеосновной код JavaScript, показывающий, что я пытаюсь сделать.Я хотел бы переписать это так, чтобы я мог установить массив слов ['foo', 'bar'], а не хрупкий PITA чуть ниже.

var $adj = $('#adjectives');

setTimeout(function() {
$adj.addClass('rotateOut');
setTimeout(function() {
    $adj.removeClass('rotateIn');
    setTimeout(function() {
        $adj.text('foo');
        $adj.addClass('rotateIn');
        setTimeout(function() {
            $adj.removeClass('rotateOut');
            setTimeout(function() {
                $adj.addClass('rotateOut');
                setTimeout(function() {
                    $adj.removeClass('rotateIn');
                    setTimeout(function() {
                        $adj.text('bar');
                        $adj.addClass('rotateIn');
                    }, 1000);
                }, 1000);
            }, 1000);
        }, 1000);
    }, 1000);
}, 1000);
}, 1000);

Answer 1

Вместо того, чтобы устанавливать таймаут каждый раз, вы должны попытаться использовать интервал, который запускает один и тот же обратный вызов, пока вы не достигнете конца.Посмотрите на этот пример, затем добавьте дополнительные биты для анимации.

words = ["hey", "just", "testing", "this", "out"]
i = 0
len = words.length

callback = ->
    clearInterval timer if i is len - 1
    console.log words[i]
    i++
    return

timer = setInterval callback, 1000

Просто для ясности, вот скомпилированный JS

(function() {
  var callback, i, len, timer, words;
  words = ["hey", "just", "testing", "this", "out"];
  i = 0;
  len = words.length;

  callback = function() {
    if (i === len - 1) clearInterval(timer);
    console.log(words[i]);
    i++;
  };

  timer = setInterval(callback, 1000);
}).call(this);