javascript - rxjs中的延迟是什么意思？

Question

第一个示例

• dom 中有一个 input#input 和一个 div#field 来呈现 inputElem 中输入的内容

• 然后订阅

  1. 当我输入 {..v.a..b.l.e} 时，div#field 会按预期在 5 秒后显示 value
  2. 然后我停下来一会儿，然后在输入中输入 {.of..this.}
  3. IMO 延迟已经执行，因此 valueofthis 应该立即出现，但实际上没有。有什么问题吗？

在第二个示例中

这两个示例有什么不同？

const Observable = Rx.Observable

const inputElem = document.getElementById('input')
const fieldElem = document.getElementById('field')
const inputTexts = Observable.fromEvent(inputElem, 'input')
                              .map(e => e.target.value)
                              .delay(5000)



inputTexts.subscribe(x=> fieldElem.textContent=x , 
                           ()=> {},
                           ()=> {console.log('completed')})


//2.
   var values = Observable.of(1,2,4,8)
                          .map(v => 2*v)
                          .delay(4000)

   values.subscribe(x => console.log(x))

Answer 1

delay与所有 Rx 运算符一样，运算符的工作原理是返回一个应用了运算符函数的新 Observable。它不会改变源 Observable 本身。

因此，在第二个示例中，将 delay 应用于 values 的行实际上没有任何效果。

   var values = Observable.of(1,2,4,8)
                          .map(v => 2*v)
   values.delay(4000) // Oops! we've lost the Observable returned from `delay`
   values.subscribe(x => console.log(x)) // prints without delay

您需要使用从 delay 返回的 Observable 才能使其表现得像您期望的那样。这通常是通过链接完成的，例如:

   var values = Observable.of(1,2,4,8)
                          .map(v => 2*v)
                          .delay(4000)  // values gets return value of delay
   values.subscribe(x => console.log(x)) // prints to console after 4s