Question

我写了一些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);

}

这产生了一个时间缺陷，在过渡期间消息慢慢开始变化而不是隐藏;

然后我考虑删除此代码的所有（处理闭包，在其中）并用11个简单的CSS行替换消息的动画功能：

.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%)}
}

然后以设定的间隔更改消息，与消息离开屏幕的时间一致。

但是，我不知道如何做到这一点。

我认为我需要某种setInterval和一个循环的混合体;一个循环，只在一段时间过后才循环。

这是（或下一个最好的事情）是如何实现的？

Answer 1

我开始考虑loop和setInterval()的工作方式，我意识到循环真正做的是设置间隔为0，检查条件然后递增变量。我可以通过设置间隔（在我的例子中）跳过条件并增加我自己的变量来创建我自己的for loop - setInterval混合。

JS：

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);

CSS：

.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);
    }
}

The JSFiddle

循环和间隔混合在JavaScript？

1 个答案: