Coffeescript 迭代页面上的单词数组？

Question

我想要在页面上迭代一系列单词，使现有单词轮换出来，并轮换新单词。

我正在使用 animate.css 通过添加和删除类来处理动画。

初始 div 上有一个入口类 .rotateIn，因此在页面渲染时会产生动画。它还具有一个 .animated 类，该类必须存在才能触发动画。

延迟两秒后，我添加退出动画类 .rotateOut，然后删除入口类，然后触发退出动画。此时div就被隐藏了。

我更改文本，然后添加入口类，然后删除出口类，触发入口动画。

一旦我击中数组中的最后一个单词，该函数就会停止。

在咖啡脚本中编写此内容以便我可以调整入口和出口之间的时间的最佳方法是什么？

编辑：这是一些基本的 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);