Question: This code creates elements when the video reaches a specified time(I'm using YouTube iFrame API). And it gets information from array of json objects that came from server. But when almost all objects passed during the time with showing and hiding elements it starts to add to normal element new elements in order from beginning. I don't know why these elements are added. 

// when the player is ready, start checking the current time every 1000 ms.

```
function onPlayerReady() {
    function updateTime() {
        var oldTime = videotime;
        if(player && player.getCurrentTime) {
            videotime = +player.getCurrentTime().toFixed();
        }
        if(videotime !== oldTime) {
            onProgress(videotime);
        }
    }
    timeupdater = setInterval(updateTime, 1000);

}

```

// when the time changes, this will be called.

```
function onProgress(currentTime) {
    var ci = array_of_json.length;
    console.log(currentTime);

    for(i = 0; i < ci; i++){
        if(currentTime === array_of_json[i].time) {
            $(document).ready(function(){
                $( '#pos_wrapper' ).prepend( "<div class='emotion " + array_of_json[i].emotion
                + "' style='display: none'></div>" );
                (function(){
                    var selector = 'div.'+array_of_json[i].emotion;
                $(selector).show(1000);
                $(selector).fadeOut(10000);
                })();
                });
    }

}

}

```

Answer: 
i think that you need to add clearInterval(timeupdater); in this condition 

```
if(videotime !== oldTime) {
        onProgress(videotime);
}

```

or the loop will never stop calling your function onProgress so it you should try this

```
if(videotime !== oldTime) {
        clearInterval(timeupdater);
        onProgress(videotime);
}

```
I've already solved the problem. I added in fadeOut callback function that removes current element.