Javascript 在这种情况下，我怎么能对每条评论只触发一次？_Javascript_Jquery

Javascript 在这种情况下，我怎么能对每条评论只触发一次？

javascript jquery

Javascript 在这种情况下，我怎么能对每条评论只触发一次？,javascript,jquery,Javascript,Jquery,我制作了一个动画，当下一个评论出现时，所有加载的评论都会出现和消失我做了，请检查问题是timeupdate每秒工作10次。因此，每个评论都会触发10次动画：（请看演示，你们会注意到它看起来很奇怪我怎么办？有人可以在JSFIDLE中修改我的代码吗这是我的密码 javascript jQuery(document).ready(function () { $('#video').on('timeupdate',function(e){ showComme

我制作了一个动画，当下一个评论出现时，所有加载的评论都会出现和消失

我做了，请检查

问题是

timeupdate

每秒工作10次。
因此，每个评论都会触发10次动画：（
请看演示，你们会注意到它看起来很奇怪

我怎么办？有人可以在JSFIDLE中修改我的代码吗

这是我的密码

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();
    });
}

在注释中添加一个显示的标志，并进行检查，在适当的地方进行更新

注意，我还重命名了一些局部变量，以防止与父范围变量发生冲突（不会影响代码，但firebug在向我展示正确的东西时有点滑稽）

已更新

将其转换为jquery插件，为了保持整洁，还将时间前后的检查作为@BMH的答案（因此可以随意将其标记为已接受）。如果时间戳中有多个注释，则停止显示所有注释，如果重新缠绕到上一次，则将重新显示注释：

jQuery.fn.videoComments=函数（选项）{
var默认值={
“评论”：[
{'time'：'10'，'message'：'hello！10秒过去了'，
{'time'：'15'，'message'：'hello！15秒过去了'，
{'time'：'5'，'message'：'hello！5秒过去了'，
{'time'：'20'，'message'：'hello！20秒过去了'}
],
};
var options=$.extend（默认值，选项）；
如果（！options.commentHolder）{
抛出“videoComments要求评论持有者将评论放入”；
}
函数setComment（消息）{
$commentContainer.css({
“marginLeft”：“400px”，
“不透明度”：“0”
}).html（信息）；
};
var$commentContainer=$（“”）；
setComment（“”）；
$（options.commentHolder）.append（$commentContainer）；
函数showComments（时间）{
var foundComments=findComments（时间）；
$.each（foundComments，function（i，comment）{
$commentContainer.animate（{“marginLeft”：“400px”，“不透明”：.0”}，600）；
setComment（comment.message）；
$commentContainer.animate（{“marginLeft”：“0px”，“不透明”：“1”}，600）；
});
};
函数查找注释（timeToFind）{
var matchingComments=$.grep（options.comments，函数（项）{
返回（item.time==timeToFind）；
});
返回匹配注释；
};
返回$（this）.each（函数（）{
var currentTime=-1；
$（此）.on（“时间更新”，函数（e）{
var localTime=this.currentTime.toFixed（）；
如果（当前时间！=本地时间）{
currentTime=本地时间；
showComments（当前时间）；
}
});
});
};
$（“#视频”）。视频评论({
“评论持有人”：$（“.newsticker”）
})

我会在就绪功能中添加标志：

jQuery（文档）.ready（函数（）{
var-fixedTime=0；
$（'#video'）。on（'timeupdate'，函数（e）{
if（this.currentTime.toFixed（）！=fixedTime）{
显示评论（固定时间）；
fixedTime=this.currentTime.toFixed（）
}  
});
}); 
var comments=[{'time'：'10'，'message'：'hello！10秒过去了'}，{'time'：'10'，'message'：'hello！第2部分10秒过去了'}，{'time'：'15'，'message'：'hello！15秒过去了'}，{'time'：'5'，'message'：'hello！5秒过去了'}，{'time'：'20'，'message'：'hello！20秒过去了'}；
函数showComments（时间）{
var coms=findComments（时间）；
如果（通信量[0]）{
$（'.newsticker p'）。动画（{“marginLeft”：“400px”，“不透明度”：“.0”}，600）。淡出（100）；
$（'.newsticker'）。追加（“”+coms[0]。消息+””；
$（'.newsticker p'）。动画（{“marginLeft”：“0px”，“不透明”：“1”}，600）；
}
}
函数查找注释（时间）{
return$.grep（注释、函数（项）{
return item.time==时间；
});
}

我给你举一个例子：TimeUpdate的触发间隔取决于浏览器。在chrome中大约是每250ms一次，在FF中是每帧一次。在你显示一条评论并更改findComments后将其标记为显示，这样它就不会找到显示的评论了，这不是更好吗？哦，为了忙于观看完全无关的视频，从而实际更改任何code！@MrP类似于

if（comments！=last_comments）{transaction；last_comments=comments；}

？也检查一下这个，但是如果用户倒带视频怎么办？已经显示的评论将不再出现。请解决这个问题！是的，好的，我会的tweak@Psytronic如果准时从jwplayer调用呢？

jwplayer（“myElement”）.onTime（function（time）{showcoments（Math.round（time.position））；}）

不能说我曾经使用过jwplayer（或者直到现在才听说过）。我想你可以这样做：

$（jwplayer（“myElement”）.videoComments（）；jwplayer（“myElement”）.onTime（function（time）{this.trigger（“timeupdate”）；}）你的代码使它完美，但还有一件事。你怎么能在垂直对齐的中间显示评论呢？例如，如果注释太长，而且它变成两行，那么它看起来是垂直对齐中间的一种定位。但是如果是一行，则看起来注释比中间略高一点。位置。你能解决这个问题吗？谢谢你的回答。如果在10秒内有两条评论，看起来很奇怪（请检查）如何在10秒钟内禁用第2部分？如果在同一秒钟内有两条以上的评论，我想忽略第二条以及之后的所有评论。因此，在任何给定的一秒钟内，你只需要第一条评论？@Psytronic请查看我在JSfiddle上的演示。你看到在10秒钟内有两条评论吗？我想忽略第二条评论f同一秒有2条以上的注释。我会在第一条注释之前显示。如果是这样，您不需要使用每条注释<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>

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

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

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")    
})

    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;
    });
}