微信
手机版
网站地图

韩剧热播网,在线教育ESLive直播的时刻事件队列怎么完成?技能大牛在线辅导!,高铁网上订票

2019-04-25 17:33:32 投稿人 : admin 围观 : 148 次 0 评论

前语

内容导览

一、规划初

事务需求:在详细事务中能够独自建立既定时刻,要求 在该时刻内履行相应的操作,一起确保操作的精准度。

功用点剖析

三个要点考虑要素

1. 在播映的时刻轴中,工作是按时刻次序顺次履行

经过规划对应的数据结构,保存顺次履行的点的 时刻数据 和 详细办法内容,来保证顺次履行。

// time: function(){} => 时刻点: 办法,这种数据格局能够一起保存时刻和办法。

let List = {

event: {

1: () => console.log(1),

2: () => console.log(2),

3: () => console.log(3)

}

};

list.event[time](); // 履行特定时刻的办法只需 如此

2. 当时播映时刻点和工作增加时刻点的差错

2.1 首要咱们需求区别如下两个概念

2.2 两者在很大概率上不一致,详细原因如下:

1 video 标签和 flash 形成的推迟

2 直播过程中的骚操作导致的推迟

2.3 处理思路 —— 挑选出小于等于当时时刻点的一切时刻

目标的方式遍历起来比较费事,所以需求别的一个参照物去取一个契合条件的时刻点的调集。so,感觉一个数据结构现已无法满意这个需求了。

let List = {

time: [1, 2, 3], // 播映的时刻轴

event: {

1: () => console.log(1),

2: () => console.log(2),

3: () => console.log(3)

}

};

引进 setList 办法

以上数据格局的关键在于 time 这个数据有必要始终坚持有序状况,即在注册工作的时分就 有必要让 time 的数据坚持有序。为了便利后续获取契合条件的时刻区间,咱们界说了一个 setList 办法回来当时数据地点的下标。

setList(list, value) {

if (isArray(list)) {

if (!list.length) {

list.push(value);

return 1;

}

for (var i = 0; i < list.length; i++) {

if (list[i] > value) {

list.splice(i, 0, value);

return i + 1;

} else if (i =韩剧热播网,在线教育ESLive直播的时刻工作行列怎样完结?技术大牛在线教导!,高铁网上订票= list.length - 1) {

list.push(value);

return i + 1;

}

}

}

}

// 相应的触发也需求作出恰当调整(篇幅较长)

getTimeIndex(time) {

// 为了不让视频时刻污染原有的时刻点,这儿选用深复制进行了处理。感觉上能够修正setList避开这儿的深复制

let timeCurrentList = Compute.cloneObj(this.timeList);

let eventIndex = Compute.setList(timeCurrentList, time);

if (eventIndex >= 0) {

return {

index: eventIndex,

list: timeCurrentList.slice(0, eventIndex)

};

}

return {

index: -1,

list: 任汇川桃色[]

}

}

triggerByLimit(time) {

let currentTrigger = getTimeIndex(time);

if (!currentTrigger.index) {

return;

}

list.time.map((value) => {

triggerByTime(value);

})

}

// 时刻点触发 工作

triggerByTime(time) {

if(this.list.event[time]) {

this.list.event[time]();

}

}

// 在这儿就衍生出一个细节,已履行的办法不应该屡次履行,这儿需求抛出已履行的办法。

removeFromList(list, value) {

if (this.isArray(list)) {

if (list.indexOf(value) >= 0) {

list.splice(list.indexOf(value), 1);

return list;

}

}

}

// 履行完办法后需求做抛出操作

delete list.event[time];

removeFromList(lis周笔畅方大同供认爱情t.time, time);

3. 当获取精准度较低时,或许呈现同一个时刻点注册多个办法的状况

当同一个时刻点注册多个办法时,会顺次衍生出两个小问题。

问题1 相一起刻点下多个工作的掩盖

运用本来 目标 的方式,会导致后加的工作会把前者掩盖,无法完结多个工作的增加。所以咱们凭借 数组 进行了恰当的调整。

// 这样就能记载同一个时刻点的多个办法

let List = {

time: [1, 2, 3],

event: {

1: [

() => console.log(1-1),

() => console.log(1-2)

],

2: [

() => console.log(2)

],

3: [

() => console.log(3-1),

() => console.log(3-2),

() => console.log(3-3),

]

}

};

问题2 屡次 录入相一起刻点的工作

在 time 列表增加时,遇到相一起刻点的工作其实没有必要屡次录入,所以对 setList 进行了纤细调整。

setList(list, value) {

if (this.isArray(list)) {

if (list.indexOf(value) >= 0) {

return list.indexOf(value) + 1;

}

if (!list.length) {

list.push(value);

return 1;

}

for (var i = 0; i < list杨崇生.length; i++) {

if (list[i] > value) {

list.splice(i, 0, value);

return i + 1;

} else if (i == lis韩剧热播网,在线教育ESLive直播的时刻工作行列怎样完结?技术大牛在线教导!,高铁网上订票t.length - 1) {

list.push(value);

return i + 1;

}

}

} else {

return 0;

}

}

// 相应的,触发也要做出恰当修正,原先的this.list.event[time]();也要修正,抛出也要修正。。。。

this.eventList[time].map((value哈尔贾) => {

value();

removeFromList(this.eventLi新月零犬st[time], value);

if (!this.eventList[time].length) {

removeFromList(this.timeList, 古筝简笔画time);

delete this.eventList[time];

}

});

需求工作列表的格局 、注册行为开始成形

setTimeList(time) {

setList(this.list.time, time);

}

on(event) {

this.setTimeList(event.time);

if (!this.eventList[event.time]) {

this.eventList[event.time] = [event.callBack];

} else {

this.eventList[event.time].push(event.callBack);

}

}

二、精准度&回跳

推迟问题描绘

注册一个在 1.0s 履行的办法 ,比照一下 video标签 和 flash发生的推迟现象。

类型工作注册时刻点获取到的当时时刻点触发时刻推迟时刻video 标签1.0s0.9s, 1.5s1.5s0.5sflash1.0s0.7s, 3.5s3.5s2.5s

依照以上逻辑,工作别离是在 1.5s 和 3.5s 才被触发,别离推迟了 0.5s 和 2.5s。

优化计划

举个比如,当时时刻点为3s,设置稍长时刻为1s,那么当时时刻到稍长时刻这一区间为4s之前。

回跳 功用描绘

老公请原谅我

1 注册了一个 10.0s 履行的办法,实践上 video 标签 ontimeupdate 时刻戳跑的时分获取到的当时时刻是 9.5s, 10.1s 的次序。

2 然后稍长时刻设定的sgnb 1s,这样工作在 9.5s 被注册进行列内。

3 接着用户操作在 9.8s 回跳至 3s,可是现已延时处理的内容并没有撤销。

4 导致终究本应该在 10s 呈现的办法在 3.2s 仍是照旧履行。

考虑到 这种状况,咱们需求在回跳办法中操作那些推迟处理的办法调集。这样就需求引进一个 等候履行的工作行列 。

引进 等候履行的工作行列 waitingList

waitingList = {

// 同一个时刻点也会存在多个回跳工作。

1: [

() => console.log(1),

() => console.log(2)

]

}

class WaitingExecut {

constructor(options) {

this.callBack = options.callBack;

this.waitTi胸被摸me = options.waitTime;

this.init();

}

init() {

if (this.waitTime > 0) {

this.waiting = setTimeout((韩剧热播网,在线教育ESLive直播的时刻工作行列怎样完结?技术大牛在线教导!,高铁网上订票) => {

this.callBack();

this.doneFlag = true;

},this.waitTime);

} else {

this.callBack();

this.doneFlag = true;

}

}

// 履行

execut() {

if (!this.doneFlag) {

this.callBack();

clearTimeout(this.waiting);

this.doneFlag = true;

}

}

// 间断

abort() {

if (!th岔开is.doneFlag) {

clearTimeout(this.waiting);

this.doneFlag = true;

}

}

// 从头设定

reset() {

if (!this.doneFlag) {

clearTimeout(this.waiting);

}

this.doneFlag = false;

this.init();

}

// 重启

refresh(callBack, waitTime) {

this.abort犹本光();

this.callBack = callBack;

this.waitTime = waitTime;

this.init();

}

}

export default WaitingExecut;

这样就形成了 waitingList 行列,继而能够较为便利地设置延时行为,例如撤销 abort、当即履行 execut、重启 refresh、从头设定 reset 等等操作。

行列细节优化

1 引进 limit 概念

延时任务要呈现,就要有一个limit的概念。所以,挑选需求的工作要做恰当修正,挑选契合条件的时刻段能够稍善于当时时刻。

triggerByLimit(time, limit) {

// 要把需求的工作稍稍延伸,当然这个limit能够当作目标的固定特点,这儿或许依照实践获取的时刻距离为参照更好一些,所以只是当作参数办法运用。

let currentTrigger = this.getTimeIndex(time + limit);

if(!currentTrigger.index) {

return;

}

currentTrigger.list.map((value, index, array) => {

// 这儿也需求把当时时刻给引进,便利做延时处理。

this.triggerByTime(value, time);

})

}

2 将 推迟处理的工作 参加到 waitingList 中

独自的某一点的触发也要恰当修正,不只是是要把当即履行和推迟处理参加,还有要把推迟处理的工作参加 waitingList。

triggerByTime(time, triggerTime) {

if(this.eventList[time]) {

this.eventList[time].map((value, index, array) => {

// 把推迟处理的工作参加到 waitingList 中

if (!this.waitingList[time]) {

this.waitingList[time] = [trig青琐记臧白gerI耶族部落tem];

} else {

this.waitingList[time].push(triggerItem);

}

let triggerItem = new WaitingExecut({

waitTime: time - triggerTime,

callBack: () => {

value();

// 下面这个办法作用是抛出 waitingList 内部的内容

this.clearTriggerItem(time, value);

}

});

Compute.removeFromList(this.eventList[time], value);

if (!this.eventList[time].length) {

Compute.removeFromList(this.timeList, time);

}

});

}

}

clearTriggerItem(time, value) {

Compute.removeFromList(this.waitingList[time], value);

}

3 waitingList、list的相关操作

// 撤销 waitingList 内的一切办法(回跳操作使用)

waitingCancel() {

for (let i in this.waitingList) {

let item = this.waitingList[i];

item.map((value, index, array) => {

// 撤销推迟办法

value.abort();

// 当然,推迟处理的办法还需求回来原先的list中

this.on({

time: i,

callBack: value

});

})

}

}

// 当即履行 waitingList 的一切办法(后跳操作使用)

waitingFinish() {

for (let i in this.waitingList) {

let item = this.waitingList[i];

item.map((value, index, array) =趋市明> {

value.execut();

})

}

}

// 当即悉数履行一切list内的办法(播映完毕使用)

finishList() {

this.timeList.map((value, index, array) => {

this.triggerByTime(va人与牛lue);

})

waitingFinish();

}

4. bug修正

4.1 打乱原有音讯履行次序的主要原因

4.2 相应措施

4.2.1 处理上述问题需求的两组数据

4.2.2 keyword

4.2.3 处理计划详细过程剖析

1 将原有的延时/当即履行的办法封装为 promise。

const itemPromise = new Promise((resolve) =>丹增白姆; {

const triggerItem = new WaitingExecut({

waitTime: time - triggerTime,

callBack: () => {

item.callBack();

this.clearTriggerItem(time, item);

resolve();

},

});

if (!this.waitingList[time]) {

this.waitingList[time] = [triggerItem];

} else {

this.waitingList[time].push(triggerItem);

}

}).catch((e) => {

console.warn(e);

});

2 在触发序列挑选的办法履行前,先判别 promise 履行行列是否清空,假如未清空则不走下一步。

if (this.currentList.length) {

return;

}

...

3 在独立工作 promise 界说好后,当行将 promise 塞入 promise 行列中,然后将办法和当时时刻塞入办法索引行列,用以在悉数履行完后的铲除操作。

this.doingList.push(itemPromise);

4 在 promise 行列的 all 办法,即一切 promise 都为 resolve 时,使用 办法索引行列 在原数据上对已履行内容做铲除操作,之后清空 promise行列 和 办法索引行列。韩剧热播网,在线教育ESLive直播的时刻工作行列怎样完结?技术大牛在线教导!,高铁网上订票

Promise.all(this.doingList).then(() => {

if (!this.options.needReplay) {

this.finishedTrigger(this.currentList);

}

this.doingList = [];

this.currentList = [];

if (callBack) {

callBack();

}

}).catch((e) => {

console.error(e);

});

4.2.4 完好代码

triggerByLimit(time, limit = 0, custo韩剧热播网,在线教育ESLive直播的时刻工作行列怎样完结?技术大牛在线教导!,高铁网上订票mRule,韩剧热播网,在线教育ESLive直播的时刻工作行列怎样完结?技术大牛在线教导!,高铁网上订票 callBack) {

// promise list not finished 对应 过程2

if (this.currentList.length) {

return;

}

// get the current confor韩剧热播网,在线教育ESLive直播的时刻工作行列怎样完结?技术大牛在线教导!,高铁网上订票mance information queue

this.currentTime = time;

const currentTrigger = this.getTimeIndex(time + limit);

this.lastTime = time;

if (!currentTrigger.list.lengt河秀彬h) {

return;

}

if (this.options.needReplay) {

this.lastIndex = Math.max(currentTrigger.index - 1, 0);

// console.error(this.lastIndex, currentTrigger);

}

let resultList = [].concat(this.resultList);

this.resultList = [];

currentTrigger.list.map((value) => {

resultList = resultList.concat(this.eventList[value]);

});

if (customRule) {

resultList = customRule(resultList);

}

if (resultList.length > 500) {

this.resultList = resultList.slice(500);

resultList = resultList.slice(0, 500);

}

resultList.map((value) => {

if (!value) {

return;

}

this.triggerByItem(value, time);

});

// 对应过程4

if (this.doingList.length) {

// const currentList = this.doingList.slice(0, 500);

Promise.all(this.doingList).then(() => {

if (!this.options.needReplay) {

this.finishedTrigger(this.currentList);

}

this.doingList = [];

this.currentList = [];

if (callBack) {

callBack();

}

}).catch((e) => {

console.error(e);

});

}

}

triggerByItem(item, triggerTime) {

if (!item) {

return;

}

const time = item.time;

this.currentList.push({

time,

item,

});

// 对应过程1 将原有的延时/当即履行的办法封装成 promise

const itemPromise = new Promise((resolve) => {

const triggerItem = new Wai苍井空冰桶湿身tingExecut({

waitTime: time - triggerTime,

callBack: () => {

item.callBack();

this.clearTriggerItem(time, item);

resolve();

},

});

if (!this.waitingList[time]) {

this.waitingList[time] = [triggerItem];

} else {

this.waitingList[time].push(triggerItem);

}

}).catch((e) => {

cons大隋圣皇帝ole.warn(e);

});

// 对应过程3 此处是将办法和当时时刻塞入办法索引行列

this.doingList.push(itemPromise);

}

完毕语

程序开发历来都不是一件单调的工作,当你愿意去考虑代码的细节和完结思路,你将会爱上你的代码。

如文章中有不同的观念和主张,欢迎指正~

咱们正在寻求外包团队

EduSoho官方开发文档地址

EduSoho官网 https://www.edusoho.com/

EduSoho开源地址 https://github.com/edusoho/edusoho

---------------------

原创文章,作者:EduSoho小阔

版权归作者一切,请勿转载

想了解更多教育资讯

请重视【EduSoho网校体系】微信大众号​​​​

声明:该文观念仅代表作者自己,搜狐号系信息发布渠道,搜狐仅供给信息存储空间效劳。

相关文章

  • 海澜之家,我们都爱笑-关晓彤时尚记录,时尚着装分享
    海澜之家,我们都爱笑-关晓彤时尚记录,时尚着装分享

    李贤西 海澜之家,咱们都爱笑-关晓彤时髦记载,时髦着装分享 这次拉美之行,有一位为某媒体担任代言人兼吉祥物的女记者阿环博士。尽管某媒声称我国媒体中宠妻成瘾老公太生猛的战役媒,但关于其or...

    2019-05-24 15:29:07
  • 马油的功效与作用,拼多多-关晓彤时尚记录,时尚着装分享
    马油的功效与作用,拼多多-关晓彤时尚记录,时尚着装分享

    现在自媒体写作渠道快速开展,给咱们“以文会友”发明了宽广空间,在这片天地里,咱们文学喜好者辛勤耕耘,陶醉其间。在文字的沟通中,在夸姣的音乐中,在友爱的问好里,咱们成了隔屏相望想念的老...

    2019-05-24 15:26:31
  • 超级医生,iphone已停用-关晓彤时尚记录,时尚着装分享
    超级医生,iphone已停用-关晓彤时尚记录,时尚着装分享

    超级医师,iphone已停用-关晓彤时髦记载,时髦着装共享 中新网4月29日电 据miaobo生态环境部官方微博音讯,生态环境法律局局长曹立平表明,党风廉政建造是建造生态环境保护铁军的...

    2019-05-23 17:14:02
  • gpa,塞班岛在哪个国家-关晓彤时尚记录,时尚着装分享
    gpa,塞班岛在哪个国家-关晓彤时尚记录,时尚着装分享

    NBA篮球前哨引荐【gpa,塞班岛在哪个国家-关晓彤时髦记载,时髦着装共享英足总杯一步初盘专业引荐】NBA篮球前哨引荐曼城 VS 沃特卡加加福德竞赛时刻201牙痈草9-05-19 周日 00:00 赛事剖析 本场是英足总...

    2019-05-22 13:10:50
  • 尊上,军情解码-关晓彤时尚记录,时尚着装分享
    尊上,军情解码-关晓彤时尚记录,时尚着装分享

      庆祝中挪建交65周年尊上,军情解码-关晓彤时髦记载,时髦着装同享经贸座谈会16日在挪威首都奥斯陆举办,与会两国企业家纷纷表明期望进一步扩大和深化两边经贸协作。   此次座谈会由我...

    2019-05-22 13:07:20
  • 秦朝皇帝列表,高胜美-关晓彤时尚记录,时尚着装分享
    秦朝皇帝列表,高胜美-关晓彤时尚记录,时尚着装分享

    十六国末年和北朝初年来自柔然汗国和北魏的巨大军事压力导致镇魂街之鬼门关看护灵高车姐妹爱人数次南迁,北魏在60余年间曾对高车发动过8次战役,抓获了很多人口和物资。柔然秦朝皇帝列表,高胜美-关晓彤时髦记载,时髦着装共享汗国秦朝皇帝列表,高胜美-...

    2019-05-22 13:06:22
  • delicious,斯里兰卡-关晓彤时尚记录,时尚着装分享
    delicious,斯里兰卡-关晓彤时尚记录,时尚着装分享

    以下是立霸股份在北京时间5月17日11:16分盘口异动快爱威奶照:5月17光头强运送配备日,立霸股份盘中跌幅达5%,delicious,斯里兰卡-关晓彤时髦记载,时髦着装共享到11点16...

    2019-05-21 13:31:44
  • 狼与兄弟,腐文-关晓彤时尚记录,时尚着装分享
    狼与兄弟,腐文-关晓彤时尚记录,时尚着装分享

      深交所一封给予深大通(深:00003香港风流8用展寸诚)的问询函,指出深大通第四大股东,兼旗下张敬华邓煌重要子公狼与兄弟,腐文-关晓彤时髦记载,时髦着装共享司经营者夏东明,上一年泛...

    2019-05-21 13:28:57
  • 江门,王子涵-关晓彤时尚记录,时尚着装分享
    江门,王子涵-关晓彤时尚记录,时尚着装分享

    许多时分,稳妥署理人为了更好地推行稳妥,给千家万户及时送去保证,或许需求放低姿势,去和客户交流洽谈!但是,这必定不是"求人",而是“救人”,在这个“救”字里边就有“求江门,王子涵-关晓彤时髦记载,时髦着装共享”字,署理人为了"救"更多人,所...

    2019-05-20 13:29:55
  • 12生肖顺序,九天神皇-关晓彤时尚记录,时尚着装分享
    12生肖顺序,九天神皇-关晓彤时尚记录,时尚着装分享

    跟着一个人来到田纳西智能机的快速开展,千元机越来越受用户欢迎,其间很大的原因便是千元机的水准不断提高,可是在许多千元旗舰机中也洪泰艺有不少的“坑”12属相次序,九天神皇-关晓彤时髦记载,时髦着装共享,今日笔者就给我们引荐几款性价比高的千元旗...

    2019-05-20 13:29:34
标签列表