RxJS를 사용하여 "사용자가 타이핑 중" 표시기를 표시하는 방법?

RxJS를 사용하여 "사용자가 타이핑 중" 표시기를 표시하는 방법?

BaconJS를 조금 알고 있지만, 지금은 "사용자가 타이핑을 하고 있다"를 만들어 RxJS를 배우려고 한다.지표.그것은 매우 간단하다. 그것은 두 가지 간단한 규칙으로 설명될 수 있다.

1. 사용자가 타이핑할 때 표시기가 즉시 표시되어야 한다.
2. 사용자가 입력을 중지할 때 표시기는 사용자의 마지막 입력 동작 후 1초까지 계속 표시되어야 한다.

이것이 맞는지 확실치 않지만, 지금까지 두 개의 물줄기를 만들었다.

1. 하나의 심장 박동 스트림이0매초마다
2. 하나의 스트림을 사용하여 사용자 입력 이벤트를 캡처하고1모든 경우에

그리고 나서 나는 그것들을 합치고, 간단히 결과를 두드린다.만약 a가1그리고 나서 표시기를 보여 준다.만약 a가0그리고 나서 나는 지시계를 숨긴다.

이것은 다음과 같이 보인다.

const showTyping = () =>
  $('.typing').text('User is typing...');

const showIdle = () =>
  $('.typing').text('');

// 1 second heartbeats are mapped to 0
const heartbeat$ = Rx.Observable
  .interval(1000)
  .mapTo(0);

// user typing events are mapped to 1
const input$ = Rx.Observable
  .fromEvent($('#input'), 'input')
  .mapTo(1);

// we merge the streams together
const state$ = heartbeat$
  .merge(input$)
  .do(val => val === 0 ? showIdle() : showTyping())
  .subscribe(console.log);

JSBin에 대한 링크:

http://jsbin.com/vekixuv/edit?js,console,output

이 구현과 관련하여 몇 가지 문제와 질문이 있다.

1. 때때로 사용자가 타이핑할 때0몰래 통과하여 표시기가 다음 사용자 키 스트로크로 돌아오기 전에 몇 초 동안 깜박인다.
2. 사용자가 입력을 중지한 후 1초 후에 표시기가 사라지는 것은 보장되지 않는다.1초 안에 지표가 사라질 것이라는 보장만 있을 뿐이다(우리가 원하는 것과 정반대의 일종이다).
3. 하트비트 스트림을 사용하는 것이 올바른 RxJS 방식인가?아닐 수도 있다는 느낌이 든다.

나는 나의 구현이 완전히 빗나간 것 같은 느낌이 든다. 나는 당신이 제공할 수 있는 어떤 도움도 고맙게 생각한다.고마워요.

두 개의 관측기구를 사용할 필요도 없고 하나만 사용할 필요도 없다. 당신이 만들려고 했던 모든 논리는 이미 에 존재한다.debounceTime()연산자:

const showTyping = () =>
  $('.typing').text('User is typing...');

const showIdle = () =>
  $('.typing').text('');

const input$ = Rx.Observable
  .fromEvent($('#input'), 'input')
  .do(() => showTyping())
  .debounceTime(1000)
  .subscribe(() => showIdle());

라이브 데모: http://jsbin.com/cixipa/6/edit?js,console,output를 참조하십시오.

이를 위해 심장 박동이 필요하지 않으며, 어떤 일이 발생할 때마다 변경 사항을 방출하십시오.

const showTyping = () =>
  $('.typing').text('User is typing...');

const showIdle = () =>
  $('.typing').text('');


// user typing events
const input$ = Rx.Observable
  .fromEvent($('#input'), 'input');

// user stopped typing
const stoppedTypingAfter1s$ = input$
  .switchMapTo(Rx.Observable.timer(1000));

// we merge the streams together
const state$ = Rx.Observable.merge(
    input$.mapTo(1),
    stoppedTypingAfter1s$.mapTo(0)
)
  .startWith(0)
  .do(val => val === 0 ? showIdle() : showTyping())
  .subscribe(console.log);

여기서 라이브를 보십시오.

그switchMap는 새로운 타이핑 이벤트가 발생할 때마다 모든 사전 검색어 1s-timer를 폐기한다.

참조URL: https://stackoverflow.com/questions/41520909/how-to-use-rxjs-to-display-a-user-is-typing-indicator