jsはチェーン式の呼び出しを実現し、実行イベント、フロー制御を加えます.
18303 ワード
var p = new Queue();
p.task(1000, () => {
console.log(1);
}).task(2000, () => {
console.log(2);
}).task(6000, () => {
console.log(6);
})
上記のクラスを実現し、設定したタスクを設定時間通りに順次実行します.function Queue() {
this.arr = [];
setTimeout(() => {
this.next();
}, 0)
return this
}
Queue.prototype.next = function () {
let fn = this.arr.shift();
fn && fn()
}
Queue.prototype.task = function (timer, fun) {
let that = this;
let fn = () => {
new Promise(resolve => {
setTimeout(() => {
that.next();
resolve()
}, timer)
}).then(res => fun())
}
this.arr.push(fn);
return this;
}
この中でチェーン式の呼び出しを実現し、上流工程の制御を加えます.function Test(name) {
this.task = [];
let fn = () => {
console.log(name);
// this.next()
this.next();
}
this.task.push(fn);
// next, next setTimeout , script , this.next()
setTimeout(() => {
this.next();
}, 0)
return this;
}
Test.prototype.firstSleep = function (timer) {
console.time("firstSleep")
let fn = () => {
setTimeout(() => {
console.timeEnd("firstSleep");
this.next();
}, timer * 1000)
}
// ,
this.task.unshift(fn);
return this;
}
Test.prototype.sleep = function (timer) {
console.time("sleep")
let fn = () => {
setTimeout(() => {
console.timeEnd("sleep");
this.next();
}, timer * 1000)
}
this.task.push(fn);
return this;
}
Test.prototype.eat = function (dinner) {
let fn = () => {
console.log(dinner);
this.next();
}
this.task.push(fn);
return this;
}
Test.prototype.next = function () {
//
let fn = this.task.shift();
//
fn && fn()
}
new Test("test").firstSleep(3).sleep(5).eat("dinner")
その中の理解の考え方は、1、チェーンコールはリターンthis 2、フロー制御はタスクキューを使って、自分で作成します.ブログのリンクを参照:https://blog.csdn.net/qq_37653449/articale/detail/83933724