我制作了动画，其中所有加载的评论都会出现，并在下一条评论出现时消失。
我做了DEMO所以请检查一下!
问题是 timeupdate 每秒运行大约 10 次。
因此，每一条评论都会触发 10 次动画:(
请看DEMO，你会发现它看起来很奇怪。
我该如何处理？ 任何人都可以修改我在 JSfiddle 中的代码吗？
这些是我的代码。
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;
}
最佳答案
在评论中添加显示的标志，并检查该标志，并在适当的地方进行更新。
注意，我还重命名了一些局部变量，以防止与父作用域变量发生冲突(不会影响代码，但 firebug 向我展示正确的东西有点有趣)
已更新
将其转换为 jquery 插件，为了简洁起见，还将检查时间作为 @BMH 的答案(因此请随意将其标记为已接受)。如果有多个评论，则停止显示某个时间戳的所有评论，并且如果重新回到上一个时间，将重新显示评论:
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")
})
关于javascript - 在这种情况下，如何为每个评论只触发一次？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18400255/