javascript中的循环和间隔混合？

我编写了一些JQuery和JS来支持单个消息元素：

• 为每个循环从数组中读取新消息
• 从屏幕外开始
• 在循环持续时间的1/4内，向右设置动画，使屏幕居中
• 在中心等待读取循环持续时间的1/2
• 再次向右设置动画，在循环持续时间的另四分之一内离开屏幕
• 使用新消息更改下一个循环
• 重复

听起来简单的任务变成了（与功能相关的）许多行代码：

function flow(i, duration){

    var message = Game.activities[i]

    var transTime = duration / 4;

    var idleTime = duration / 2;

    var windowDouble = $(window).width() * 2;

    $(".message-flow").text(message);

    $(".message-flow")
    .animate({transform:"translateX(-" + windowDouble + "px)"},0)
    .animate({transform:"translateX(0px)"},transTime)
    .delay(idleTime)
    .animate({transform:"translateX(" + windowDouble + "px)"},transTime);

}

function flowFunc(i, duration){

    return function(){

        flow(i, duration);

    }
}


function activityFlowInit(duration){

    var delay = 0;

    for (var i = 0; i < Game.activities.length; i++){

        setTimeout(flowFunc(i, duration),delay);

        delay += duration;

    }

    totalDuration = duration * Game.activities.length;

    setTimeout(function(){
        activityFlowInit(duration);
    },totalDuration);

}

之后，按照设定的时间间隔更改消息，与消息离开屏幕的时间相协调

然而，我不知道我怎么能做到这一点

我想我需要某种混合的

setInterval

和一个循环；仅在经过一段时间间隔后循环的循环

---

---

这（或下一个最好的事情）是如何实现的？我开始思考

循环和
设置间隔（）
的工作方式，我意识到循环真正做的是将间隔设置为0，检查一个条件，然后增加一个变量。我可以通过设置间隔（在我的情况下）跳过条件并增加我自己的变量，使我自己的
for循环
-
setInterval
混合

JS:

CSS:



注意：在看到
setTimeout（flowFunc（），delay）
的脚本中，您可能会被抛出一点，但是
flowFunc（）
返回一个匿名函数；它正在处理关闭。
.message{
   animation: transit 4s;
   animation-iteration-count:infinite;
}

@keyframes transit
{
   0% {transform:translateX(-150%)}
   25% {transform:translateX(50%)}
   75% {transform:translateX(50%)}
   100% {transform:translateX(150%)}
}

var i = 0;
var messages = ["message 1", "message2", "message 3"];

function writeAdd() { // Handling the closure

    return function () {
        $(".message").text(messages[i]);
        //if (condition === true){ // condition excluded
            i++;
            if(i === messages.length) i = 0; //creating the loop's repetition
        //}
    };
}

function loopMessage(duration) {
    $(".message").css("-webkit-animation-play-state","running");
    setInterval(writeAdd(), duration); //setting the interval
}

loopMessage(4000);

.message-flow{
    -webkit-animation: transit 8s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-play-state:paused;
}

@-webkit-keyframes transit {
    0% {
        -webkit-transform:translateX(-2000px);
    }
    25% {
        -webkit-transform:translateX(0px);
    }
    75% {
        -webkit-transform:translateX(0px);
    }
    100% {
        -webkit-transform:translateX(2000px);
    }
}