javascript - jQuery 等待直到第一个间隔

标签 javascript jquery setinterval

我有这个小的 jquery 代码,我希望数组的内容以一定的延迟平滑地淡入淡出,最后再次从第一个数组项重新启动。

它工作正常,但不幸的是,函数在开始显示第一个条目之前等待 5000 毫秒的时间间隔。我想立即开始。有谁知道我可以做到这一点?

这是我的代码:

$('.wissenswertes').append('<div class="content"></div>');
var wissenArray = [0, 1, 2, 3];
itemNr = wissenArray.length;

function loopWissen() {
    var i = 0;
    setInterval(function () {
        $('.wissenswertes .content').text(wissenArray[i]).fadeIn(1000).delay(3000).fadeOut(1000);
        i++;
        if (i == itemNr) {
            i = 0;
        }
    }, 5000);
}
$(loopWissen);

和一个Fiddle .

顺便说一句:如果您对一般代码改进有任何建议,非常欢迎您告诉我!谢谢。

最佳答案

不要为此使用 setInterval。它很脆弱,因为您依赖于与其他定时代码一致对齐的间隔。

我会在 fadeOut(1000) 之后调用该函数。

$('.wissenswertes').append('<div class="content"></div>');

var wissenArray = [0, 1, 2, 3];

function loopWissen() {
    var i = 0;
    (function loop() {
        $('.wissenswertes .content').text(wissenArray[i])
                                    .fadeIn(1000)
                                    .delay(3000) //  v---next loop after fadeOut
                                    .fadeOut(1000, loop);
        i = ++i % wissenArray.length;
    }());
}

$(loopWissen);

我还缩短了您的 i 递增代码。您的方式绝对没问题,但这只是更简洁一点。

还删除了 itemNr,因为获取 .length 非常便宜。

关于javascript - jQuery 等待直到第一个间隔,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19730068/

相关文章:

javascript - setInterval 有效但延迟了一个周期

javascript - 使用间隔更新 d3 数据

javascript - 单击时不显示标记上的 MapBox 弹出窗口描述

php - 工具提示不显示结果

javascript - 动态创建 ui DateTimePicker 时未捕获的类型错误

json - 为什么 getjson 仅返回 1 行

Javascript 自动更改背景颜色不起作用

javascript - 可以修改此 Youtube 代码以强制自动播放吗?

javascript - 如何知道电子邮件是否已经在firebase身份验证中注册,javascript?

javascript - 将输入框中的值乘以表中的固定值 (HTML)