I started thinking about the way a loop
and setInterval()
works, and I realized that what a loop is really doing is setting an interval of 0, checking a condition and then incrementing a variable. I can make my own for loop
-setInterval
hybrid by setting the interval, (in my case) skipping the condition, and incrementing my own variable.
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);
}
}