美文网首页
js中clearTimeout和setTimeout用法

js中clearTimeout和setTimeout用法

作者: 发条夏 | 来源:发表于2018-12-26 10:34 被阅读0次

    今天有个需求,记录用户播放视频的时间节点。从而显示视频的播放状态,状态为正在播放,播放完了。

    本来可以使用监听页面关闭或者刷新事件,在用户离开的时候告知服务器当前的播放时间节点。但是由于业务有微信端,监听事件不生效,只能用js轮询的方式。设置时间为4s,后期根据业务来调整,在服务器压力和记录时间点准确性二者权衡。

    直接贴代(伪)代码吧,使用的是腾讯云点播。

    var timeOut;
    //腾讯云点播监听事件
    player.on('loadedmetadata', function(){
    //加载完毕
    video_time_length = player.duration();//视频总长度,因为数据库没有层储存,由前端传给后台。用于判断该视频是否学完(大于95%即学完,考虑到片尾。)
    console.log(video_time_length);
    if(study_time){
    player.currentTime(study_time)//当前播放位置

                }
            });
            player.on('play', function(){
                RecordTimePoint();
            });
            player.on('pause',function(){
                clearTimeout(timeOut);//清楚定时器,这里之前写成了clearTimeout(“timeOut”),要注意。
                console.log('暂停了');
            })   
    

    function RecordTimePoint(){
    console.log(timeOut)
    var currentTime = player.currentTime();
    $.ajax({
    url : "{{ url('public-course/videoLogs') }}",//服务器url
    data: {},//参数:当前课程id,时间点等
    dataType: 'json',
    type : 'post',
    success: function (res) {

                }, error: function () {
    
                }
            })
                
            timeOut = setTimeout(function(){
                playRecords()
            },4000)
        }
    

    主要是考虑到用户点击暂停后,就不需要继续轮询,节省资源。

    相关文章

      网友评论

          本文标题:js中clearTimeout和setTimeout用法

          本文链接:https://www.haomeiwen.com/subject/sjoclqtx.html