私とRxプログラミングを学びます--検証コードを取得します

この例では

fromEvent

interval

map

take

tap

switchMapTo

ビジネスロジック

認証コード取得ボタン

をクリック

認証コードボタンのグレーを取得し、N秒カウントダウン

を開始する.

カウントダウン終了ボタンクリック可能状態回復

一般的な書き方

var enabled = true
var remainTime = N
var id = null
sendBn.on('click',function(){
  if(enabled){
    sendSms()
    enabled = false
    gray(true)
    remainTime = N
    id  = setInterval(cooldown,1000)
  }
})
function cooldown(){
  remainTime --
  sendBn.label = remainTime + "       "
  if(remainTime==0){
    clearInterval(id)
    enabled = true
    sendBn.label = "  "
    gray(false)
  }
}

機能は複雑ではありませんが、前のビジネスロジックではなく、コードを直接見ている場合は、この3つのロジックが含まれていることを少し理解する必要があります.次に、Rxプログラミングによって、このビジネスロジックを実現します.
まずイベントフローsendObをクリックする必要があります.ボタンをクリックするたびにこのsendObからイベントが送信されます.

let sendOb = fromEvent(sendBn,'click')//         

これはコールバック関数とあまり差がないように見えるが,組み合わせるとRxの威力を示す.
カウントダウンを生成するためにイベントフローが必要です

let coolDownOb = rxjs.interval(1000).pipe(map(_ => N - _), take(N))

説明interval(1000)は毎秒1回のイベントを発生し、0,1,2,3…map操作は、N,N−1,N−2に変換され、…(N=60であれば60,59,58に相当…)take(N)操作は、N番目のイベントが到着した後、イベントフローが完了し、interval(1000)はイベントの配布を停止する
intervalは内部でclearInterval操作を行います.
クリック完了後に認証コードを送信する論理で、カウントダウンイベントを生成します.

let getVCodeOb = sendOb.pipe(take(1), tap(() => {
    sendSms()//          
    gray(true)//       
}), switchMapTo(coolDownOb))

take(1)は、ボタンのクリックをサブスクリプション後に1回だけ有効にする(狂点ボタンは、1回目のみ有効である)、再有効にする必要がある場合は(他の方法でこの論理を実現することもできる)switchMapToは、イベントをトリガーした後、coolDownObイベントフローをアクティブにし、サブスクリプションにこのイベントフローのイベントを受け入れさせる.
最後に、このイベントフローを購読し、論理を実行する必要があります.

function enableGetVCode () {
    gray(false)//       
    getVCodeOb.subscribe(num => sendBn.label = num + "       ", console.error, enableGetVCode)
}
enableGetVCode()

subscribeの3番目のパラメータはイベントを完了することであり、enableGetVcodeを転送し、「ループ」を形成します.ボタンは再び傍受され、新しい認証コードの取得を開始します.
Rxを使用したプログラミング後

状態変数

を定義する必要はなくなりました.

論理は完全ないくつかの

に分離される.

論理

の修正が容易

は、基本論理

を多重化するために、より多くの論理を組み合わせることができる.