How can I fire only once for each comment in this case?


I made animation in which, all the loaded comments appears and disappear when next comment comes.

I made DEMO so please, check it!

The problem is that timeupdate is working about 10 times per second.
So animation is being fired for 10 times for every comment:(
Please see DEMO, and you'll notice that it looks weird move.

How can I handle that? Can anyone modify my code in JSfiddle, please.

These are my code.

javascript

jQuery(document).ready(function () {
    $('#video').on('timeupdate',function(e){
            showComments(this.currentTime);  
    });

}); 
var comments = [{'time':'10','message':'hello! 10 secs has past'},{'time':'15','message':'hello! 15 secs has past'},{'time':'5','message':'hello! 5 secs has past'},{'time':'20','message':'hello! 20 secs has past'}];


function showComments(time){
    var comments = findComments(time);
    $.each(comments,function(i,comment){
        $('.newsticker p').animate({"marginLeft":"400px","opacity":".0"}, 600).fadeOut(100);
        $('.newsticker').append("<p style='margin-left:400px;opacity:0'>"+comment.message+"</p>");
        $('.newsticker p').animate({"marginLeft":"0px","opacity":"1"}, 600);
    });
}

function findComments(time){
    return $.grep(comments, function(item){
      return item.time == time.toFixed();
    });
}

HTML

<body>
    <div class="newsticker"> 
    </div>
    <br />
    <br />
    <video id="video" controls="controls" autoplay="autoplay" name="media"><source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"></video>
</body>

CSS

div.newsticker{
    border:1px solid #666666;
    width:100%;
    height:50px;
}

.newsticker p{
    height:20px;
    width:150px;
    float:left;
    position:absolute;
}

Add a shown flag into the comments, and check for that, update where appropriate.

Note, I've also renamed some local variables to prevent clashes with parent scope ones (doesn't impact the code, but firebug got a bit funny about showing me the correct thing)

Updated

Converted it into a jquery plugin, for cleanliness, also put the check around the time as @BMH's answer (so feel free to mark his as the accepted). Stopped it showing all the comments for a timestamp if there's more than one, and will re-show a comment if re-wound to a previous time:

http://jsfiddle.net/9zqhF/12/

jQuery.fn.videoComments = function(options){
    var defaults = {
        "comments" : [
            {'time':'10','message':'hello! 10 secs has past'},
            {'time':'15','message':'hello! 15 secs has past'},
            {'time':'5','message':'hello! 5 secs has past'},
            {'time':'20','message':'hello! 20 secs has past'}
        ],
    };

    var options = $.extend(defaults, options);

    if(!options.commentHolder){
        throw "videoComments requires a commentHolder to put the comments in";
    }

    function setComment(message){
            $commentContainer.css({
                "marginLeft" : "400px",
                "opacity": "0"
            }).html(message);
    };

    var $commentContainer = $("<p></p>");
    setComment("");

    $(options.commentHolder).append($commentContainer);

    function showComments(time){
        var foundComments = findComments(time);
        $.each(foundComments,function(i,comment){
            $commentContainer.animate({"marginLeft":"400px","opacity":".0"}, 600);
            setComment(comment.message);
            $commentContainer.animate({"marginLeft":"0px","opacity":"1"}, 600);
        });
    };

    function findComments(timeToFind){
        var matchingComments = $.grep(options.comments, function(item){
          return (item.time == timeToFind);
        });

        return matchingComments;
    };

    return $(this).each(function(){
        var currentTime = -1;
        $(this).on("timeupdate", function(e) {
            var localTime = this.currentTime.toFixed();
            if(currentTime != localTime){
                currentTime = localTime;
                showComments(currentTime); 
            }
        });
    });
};

$("#video").videoComments({
    "commentHolder" : $(".newsticker")    
})

I would put flag in the ready function:

http://jsfiddle.net/b_m_h/9zqhF/11/

    jQuery(document).ready(function () {
    var fixedTime = 0;
    $('#video').on('timeupdate',function(e){
        if(this.currentTime.toFixed() != fixedTime){
            showComments(fixedTime);
            fixedTime = this.currentTime.toFixed()
        }  
    });

}); 
var comments = [{'time':'10','message':'hello! 10 secs has past'},{'time':'10','message':'hello! part-2 10 secs has past'},{'time':'15','message':'hello! 15 secs has past'},{'time':'5','message':'hello! 5 secs has past'},{'time':'20','message':'hello! 20 secs has past'}];


function showComments(time){
    var coms = findComments(time);
    if(coms[0]){
            $('.newsticker p').animate({"marginLeft":"400px","opacity":".0"}, 600).fadeOut(100);
            $('.newsticker').append("<p style='margin-left:400px;opacity:0'>"+coms[0].message+"</p>");
            $('.newsticker p').animate({"marginLeft":"0px","opacity":"1"}, 600);
    }
}

function findComments(time){
    return $.grep(comments, function(item){
      return item.time == time;
    });
}