RxJS：點擊後禁用刷新按鈕持續時間

我是RxJS的新手，試圖做一個簡單的演示，讓您每隔一秒刷新一次數據。RxJS：點擊後禁用刷新按鈕持續時間

我做了一個按鈕，並從中創建了一個點擊流。這個問題開始時，我想創建一個流，每個按鈕點擊發出錯誤，並在一秒鐘後再次發出真實。

例如 - 初始狀態爲真，因爲我們可以在開始時刷新。一旦我點擊按鈕，新值應該是錯誤的點擊後，因爲我們不能進一步刷新。

最後一秒鐘過後 - 值應該再次爲真。

我試圖創建它併成功，但它看起來很糟糕。任何想法熱點做得更好，更清潔？另一件事是我真的不知道在這裏使用RxJS是一個好主意，因爲簡單的常規方法是將布爾值設置爲true，並在單擊後將其設置爲false，並使用setTimeout將其更改爲true 。

這裏是我做的：

// The stream of the button clicks. 
$clicksStream 
    // Change the click stream to the timed true false change. 
    .switchMap(() => Observable 
        // Emit first value immediately and every 1 second after. 
        .timer(0, 1000) 
        // Map each one - 0 becomes false and others true. 
        .map(x => !!x) 
        // Take only first two items. 
        .take(2)) 
    // Always the start value is true. 
    .startWith(true);

來源

2017-07-07 YonatanN

處理異步操作與rxjs是一個很好的主意。這就是反應式編程的意義所在，而rxjs擅長這樣做。

您生成的代碼之美就是它是純粹的。它不依賴於任何外部環境。

使用setTimeout和良好的布爾值來改變狀態當然會工作，但以純度和函數式編程爲代價。你會做命令性的編程和副作用。和代碼的語義不相同

button.addEventListener("click", function refresh(event) { 
    refreshData(); 
    setTimeout(renderButton, 1000, true) 
    renderButton(false) 
})

的用這段代碼的問題：這是非常依賴於它的上下文。爲了它的工作，你需要實現refreshData和renderButton。他們也需要從該範圍訪問。

但是你的一段代碼是完全獨立的，你可以在別處複製/粘貼，它仍然可以工作。

的另一個問題是，點擊事件處理函數負責太多的東西（其實刷新數據，渲染按鈕的新狀態，並啓動超時。這是完全打破了單一職責原則。

我希望我已經幫你看到你已經生成的代碼的好處。它實際上是相當不錯的，它只是習慣了的事情。

一個簡單的簡化你可以把會使用startWith和mapTo代替的那種哈克!!x :)

$clicksStream 
    // Change the click stream to the timed true false change. 
    .switchMap(() => Observable 
        // just a timer of 1000ms 
        .timer(1000) 
        // when it emits we just return true 
        .mapTo(true) 
        // Take only first two items. 
        .startWith(false) 
) 
    // Always the start value is true. 
    .startWith(true);

來源

2017-07-07 17:34:55 atomrc

您可以使用timeoutWith運算符來執行此操作。

$clickStream 
    .switchMapTo(
    // Start with false 
    Observable.of(false) 
     // If no values are emitted for 1 second emit true 
     .timeoutWith(1000, Observable.of(true)) 
) 
    .startWith(true);

來源

2017-07-07 18:08:34 paulpdaniels

RxJS：點擊後禁用刷新按鈕持續時間

回答

相關問題