Coffeescription在页面上的单词数组中进行迭代

Coffeescript to iterate through an array of words on a page?

本文关键字：数组 迭代 单词 Coffeescription      更新时间：2023-09-26

我有一个单词数组，我想在一个页面上迭代，让现有的单词旋转出来，让一个新词旋转进来。

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

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

在两秒钟的延迟之后，我添加出口动画类.rotateOut，然后删除入口类，这将触发出口动画。此时，div被隐藏。

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

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

用coffeescript写这篇文章的最好方法是什么，这样我就可以调整入口和出口之间的时间？

EDIT:这里有一些基本的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);

与其每次都设置一个超时，不如尝试使用一个间隔来触发相同的回调，直到到达结束。看一下这个例子，然后添加额外的部分来制作动画。

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);
相关文章：