關於js的 鏈式呼叫和流程控制 (sleep)
阿新 • • 發佈:2018-11-25
實現下面的函式:
new Test("test").firstSleep(3).sleep(5).eat("dinner")
//等待3秒
//test
//等待5秒
//dinner
鏈式呼叫沒什麼可說的 return this 就好了 ,此處的sleep 乍一看確實會引發一些思考,關鍵是非同步之後我的this 在哪裡 ;那這個時候我就可以建立一個非同步佇列 ;整個實現可以分為三個核心部分
1,串接所有this (通過return this的方式)
2,把所有任務放到任務佇列裡面
3,通過一個 方法有序執行佇列裡面的任務
具體實現如下:
function Test(name){ this.task = []; let fn = ()=>{ console.log(name); this.next(); } this.task.push(fn); setTimeout(()=>{ this.next(); },0) return this; } Test.prototype.firstSleep = function(timer){ console.time("firstSleep") let that = this; let fn = ()=>{ setTimeout(()=>{ console.timeEnd("firstSleep"); that.next(); },timer*1000) } this.task.unshift(fn); return this; } Test.prototype.sleep = function(timer){ console.time("sleep") let that = this; let fn = ()=>{ setTimeout(()=>{ console.timeEnd("sleep"); that.next(); },timer*1000) } this.task.push(fn); return this; } Test.prototype.eat = function(dinner){ let that = this; let fn = ()=>{ console.log(dinner); that.next(); } this.task.push(fn); return this; } Test.prototype.next = function(dinner){ let fn = this.task.shift(); fn&&fn() } new Test("test").firstSleep(3).sleep(5).eat("dinner")