Javascript jQuery等待到第一个间隔

我有一个小小的jquery代码，我希望数组的内容能够以一定的延迟平滑地淡出，并在最后重新启动第一个数组项

它工作正常，但不幸的是，在开始时，函数等待5000ms的间隔，然后才开始显示第一个条目。我想马上开始。有人知道我能做到吗

这是我的密码：

$('.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);

$（'.wissenswertes'）。附加（''）；
var wissenArray=[0,1,2,3]；
itemNr=wissenArray.length；
函数loopWissen（）{
var i=0；
setInterval（函数（）{
$（'.wissenswertes.content'）.text（wissenArray[i]）.fadeIn（1000）、delay（3000）、fadeOut（1000）；
i++；
如果（i==itemNr）{
i=0；
}
}, 5000);
}
美元（卢普维森）；

还有一个

---

顺便说一句：如果你对一般代码改进有任何建议，欢迎你告诉我！谢谢。

您可以先定义函数，而不是使用匿名函数，然后立即调用它：

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

---

您可以先定义函数，而不是使用匿名函数，然后立即调用它：

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

大概是这样的：

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

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

$（'.wissenswertes'）。附加（''）；
var wissenArray=[0,1,2,3]；
var itemNr=wissenArray.length；
var i=0；
函数loopWissen（）{
$（'.wissenswertes.content'）.text（wissenArray[i]）.fadeIn（1000）、delay（3000）、fadeOut（1000）；
i++；
如果（i==itemNr）{
i=0；
}
}
设置间隔（loopWissen，5000）；
loopWissen（）；

类似这样的内容：

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

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

$（'.wissenswertes'）。附加（''）；
var wissenArray=[0,1,2,3]；
var itemNr=wissenArray.length；
var i=0；
函数loopWissen（）{
$（'.wissenswertes.content'）.text（wissenArray[i]）.fadeIn（1000）、delay（3000）、fadeOut（1000）；
i++；
如果（i==itemNr）{
i=0；
}
}
设置间隔（loopWissen，5000）；
loopWissen（）；

不要为此使用

setInterval

。它是脆弱的，因为您依赖于与其他计时代码一致的间隔

我只需要在淡出（1000）之后调用函数

$（'.wissenswertes'）。附加（''）；
var wissenArray=[0,1,2,3]；
函数loopWissen（）{
var i=0；
（函数循环（）{
$（'.wissenswertes.content'）.text（wissenArray[i]）
法丹先生（1000）
.delay（3000）//v--衰减后的下一个循环
.衰减（1000，环路）；
i=+i%wissenArray.length；
}());
}
美元（卢普维森）；

我还缩短了您的

I

递增代码。你的方式绝对不错，但这只是更简洁一点

---

还删除了

itemNr

，因为获取

.length

非常便宜。

不要为此使用

setInterval

。它是脆弱的，因为您依赖于与其他计时代码一致的间隔

我只需要在淡出（1000）之后调用函数

$（'.wissenswertes'）。附加（''）；
var wissenArray=[0,1,2,3]；
函数loopWissen（）{
var i=0；
（函数循环（）{
$（'.wissenswertes.content'）.text（wissenArray[i]）
法丹先生（1000）
.delay（3000）//v--衰减后的下一个循环
.衰减（1000，环路）；
i=+i%wissenArray.length；
}());
}
美元（卢普维森）；

我还缩短了您的

I

递增代码。你的方式绝对不错，但这只是更简洁一点

---

还删除了

itemNr

，因为获取

.length

非常便宜。

我个人会清理一下：

function loopWissen() {
    var array = [0, 1, 2, 3];
    (function next(i, a, l) { 
        $('.wissenswertes .content')
             .text(a[i])
             .fadeIn(1000).delay(3000).fadeOut(1000, function () {
                next(++i % l, a, l);
        });
    })(0, array, array.length);
}

---

就我个人而言，我会稍微清理一下：

function loopWissen() {
    var array = [0, 1, 2, 3];
    (function next(i, a, l) { 
        $('.wissenswertes .content')
             .text(a[i])
             .fadeIn(1000).delay(3000).fadeOut(1000, function () {
                next(++i % l, a, l);
        });
    })(0, array, array.length);
}

---

将其放入函数中，然后使用上次淡出的回调再次调用该函数。将其放入函数中，然后使用上次淡出的回调再次调用该函数。非常感谢您对代码的改进，它工作起来非常有魅力！在这个计时环境中，我也有点担心setInterval。谢谢！非常感谢您对代码的改进，它工作起来很有魅力！在这个计时环境中，我也有点担心setInterval。谢谢！