js中clearTimeout和setTimeout用法

字数 332阅读 599

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

本来可以使用监听页面关闭或者刷新事件,在用户离开的时候告知服务器当前的播放时间节点。但是由于业务有微信端,监听事件不生效,只能用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)
    }

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

推荐阅读更多精彩内容