JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="caption-contain">
    Caption 1
</div>

JavaScript

var sec = 0,
    changes = [],
    captionAmount;

function changeCaption(sec){
    captionAmount = 0;
    for(var i = 0, x = changes.length; i < x; i++){
        if(sec == changes[i].time){
            $(".caption-contain").html(changes[i].caption);
            captionAmount++;
        }
        if(captionAmount === x){
            clearInterval(timer);
            console.log("cleared timer");
        }
    }
}

changes.push({time: 5, caption: "Caption 2"});
changes.push({time: 10, caption: "Caption 3"});
changes.push({time: 15, caption: "Caption 4"});
changes.push({time: 20, caption: "Caption 5"});
changes.push({time: 25, caption: "Caption 6"});
changes.push({time: 30, caption: "Caption 7"});
changes.push({time: 35, caption: "Caption 8"});

var timer = setInterval(function(){
    changeCaption(sec++);
}, 1000);