>[success] # 手動觸發異步 * 大多數情況下異步都是內部觸發，當想在某個節點自己去控制異步觸發實際，可以對外去暴露`resolve`,`reject` ~~~ function defer() { const deferred = {} deferred.promise = new Promise((resolve, reject) => { deferred.resolve = resolve deferred.reject = reject }) return deferred } ~~~ * 使用時候完完全由外部控制，異步內部成功和失敗 ~~~ const deferred = defer() deferred.resolve(1) deferred.promise.then((res) => { console.log(res) // 1 }) const deferred1 = defer() deferred1.reject(11) deferred1.promise.catch((res) => { console.log(res) // 11 }) ~~~ >[info] ## 用戶抽獎 有若干個用戶參與，每個用戶從1到10中選擇一個數字作為幸運數字，而系統一秒鐘隨機產生一個1到10的數字，若這個數字和用戶的幸運數字相同，則該用戶勝出 * 第一反應自己寫的代碼 缺點我們可以不使用Promise，直接將每一秒鐘生成的數字與用戶的數字逐一比較，選出勝出的用戶。但是如果這樣做，我們需要在定時器模塊維護一個用戶列表信息，這增加了代碼的耦合。如果使用異步信號，則可以避免這樣的耦合。 ~~~ // 獎池 class Jackpot { num = -1 users = [] // 注冊用戶 register(userInfo) { this.users.push(userInfo) } // 開始 start() { return this.users.find((item) => { return item.num === this.num }) } } // 用戶獎池 const ls = [] const j = new Jackpot() j.register({ name: '1', num: 3 }) j.register({ name: '2', num: 5 }) j.register({ name: '3', num: 7 }) const timerID = setInterval(() => { const num = Math.ceil(Math.random() * 10) j.num = num const info = j.start() if (info) { console.log(info.name) clearInterval(timerID) } else { console.log('wu') } }, 1000) ~~~ * [前端工程師進階 10 日談](https://juejin.cn/book/6891929939616989188) 給的方案 ~~~ function defer() { const deferred = {} deferred.promise = new Promise((resolve, reject) => { deferred.resolve = resolve deferred.reject = reject }) return deferred } const _state = Symbol('state') const _checkers = Symbol('checker') class Signal { constructor(initState) { this[_state] = initState this[_checkers] = new Map() } get state() { return this[_state] } set state(value) { // 每次狀態變化時，檢查未結束的 defer 對象 ;[...this[_checkers]].forEach( ([promise, { type, deferred, state }]) => { if ( (type === 'while' && value !== state) || // 當信號狀態改變時，while 信號結束 (type === 'until' && value === state) // 當信號狀態改變為對應的 state 時，until 信號結束 ) { deferred.resolve(value) this[_checkers].delete(promise) } } ) this[_state] = value } while(state) { const deferred = defer() if (state !== this[_state]) { // 如果當前狀態不是 while 狀態， while 的 deferred 結束 deferred.resolve(this[_state]) } else { // 否則將它添加到 checkers 列表中等待后續檢查 this[_checkers].set(deferred.promise, { type: 'while', deferred, state, }) } return deferred.promise } // 用來收集 用戶信息保存在 _checkers 的map中 until(state) { const deferred = defer() if (state === this[_state]) { // 如果當前狀態就是 until 狀態， until 的 deferred 結束 deferred.resolve(this[_state]) } else { // 否則將它添加到 checkers 列表中等待后續檢查 this[_checkers].set(deferred.promise, { type: 'until', deferred, state, }) } return deferred.promise } delete(promise) { this[_checkers].delete(promise) } deleteAll() { this[_checkers].clear() } } const lucky = new Signal() const timerID = setInterval(() => { const num = Math.ceil(Math.random() * 10) console.log(num) lucky.state = num // 去檢查 是否有中獎 用戶有就改變狀態 }, 1000) async function addLuckyBoy(name, num) { await lucky.until(num) // 由于沒有改變狀態所以是 padding 狀態 ，下面的代碼不會執行 console.log(`${name} is lucky boy!`) clearInterval(timerID) lucky.deleteAll() // 刪除checkers中的所有promise對象 } addLuckyBoy('張三', 3) addLuckyBoy('李四', 5) addLuckyBoy('王五', 7) ~~~