Question

好吧，标题可能会让它听起来很简单（也许就是这样），但我无法弄清楚如何显示数组中的值，而不仅仅是用它们来执行每个，但是把它们慢慢地放在网站上，效果很好......

像这个Twitter widget，但是来自一个数组（也许等待2秒，并从数组中抛出另一个值）？

我的数组包含另一个数组，有4个值，是否可以显示前2个值，等待大约2秒，然后显示最后2个值？现在当最后两个值出来时（来自prev数组），再等待2秒，然后显示下一个数组（再次显示四个值，首先显示2，等待2秒，然后显示下一个，依此类推...... 。）

Answer 1

您可以使用setInterval或链式系列setTimeout轻松完成此操作。我倾向于选择后者，看起来像这样：

function showValues(a, delay) {
    var index = 0;

    if (a.length !== 0) {
        // If you want a delay before the first one:
        setTimeout(showValue, delay);

        // Alternately, if you want to show the first right away
        // showValue();
    }

    // Function to show one value
    function showValue() {
        // Get the value
        var value = a[index++];

        /* ...show the value however you see fit... */

        // Schedule next display, if any
        if (index < a.length) {
            // Schedule next run
            setTimeout(showValue, delay);
        }
    }
}

用法：

showValues(["value1", "value2", /* etc. */, 2000); 2000 = two seconds

Live example | source

Answer 2

fadeIn()等动画函数使用jQuery FX队列，因此您可以在调用链中使用.delay()来延迟调用这些函数。在以下示例中，每秒显示一个元素。

var data = ['foo', 'bar', 'foobar', 'moo', 'meow', 'xxx'];
var list = $('ul');
$.each(data, function(i, value) {
    $('<li/>', { text: value }).hide().appendTo(list).delay(i * 1000).fadeIn();
});

演示：http://jsfiddle.net/ThiefMaster/frW8s/

在jquery中显示数组中的值

2 个答案: