Как распоряжаться в полете просит

Question

Сейчас скрипт работает так:

жмет кнопку и получить значение в течение 3 секунд. Если я дважды нажимаю кнопку, я получаю два значения с задержкой между ними, равными времени между нажатиями. Мой вопрос в том, как игнорировать предыдущие запросы, когда я снова нажимаю кнопку. Другими словами, каждый новый клик должен гарантировать , что я получаю следующее значение за 3 секунды и ничего между ними.

---

//foo.js I CAN CHANGE EVERYTHING HERE 

import * as bar from './bar'; 
let oldValue; 

bar.subject.subscribe(newValue => { 
    oldValue = newValue 
}); 

Rx.fromEvent(document, 'click').subscribe(() => { 
    bar.getValue(); 
}); 

---

//bar.js IT MUST NOT CHANGE 

const subject = new Subject(); 

const getValue =() => { 
    setTimeout(() => { 
    subject.next(Math.random()); 
    }, 3000); 
}; 

exports {subject, getValue}; 

Answer 1

Узор вы охарактеризовали случается много в веб-разработки и называется дребезга.

Я ограничусь вашим конкретным примером, но учтите, что rxjs имеет разнообразные решения в зависимости от того, что действительно делает getValue. Если, например, это бэкэнд-запрос, у rxjs есть клиент AJAX [1], используемый из браузеров, который знает, как фактически отменить предыдущие запросы AJAX (запросы все еще выполняются до конца на стороне сервера, но любые результаты не обрабатываются браузер).

Для конкретного случая, показанного здесь, вам нужно будет решить, что конкретно нужно игнорировать. Если щелкает до последнего клика в течение последних 3-х секунд игнорируется (и ПолучитьЗначение быть вызван только один раз каждые 3 секунды? В таком случае

Rx.fromEvent(document, 'click').subscribe(() => bar.getValue()); 

становится

Rx.fromEvent(document, 'click').debounceTime(3000).subscribe(() => bar.getValue()); 

Вы можете сделать это если bar.getValue() очень ресурсоемкая функция, которая будет вызываться только один раз.

Если вы решили не игнорировать клики, но просто игнорировать предыдущие результаты bar.getValue() генерируется в течение 3 секунд, а затем года у заменит

bar.subject.subscribe(newValue => oldValue = newValue); 

с

bar.subject.debounceTime(3000).subscribe(newValue => oldValue = newValue); 

Я не могу оценить, были ли вы использовали тему, потому что это то, что вам действительно нужно, но это, скорее всего, вам не нужно, что окольные и вы могли бы просто иметь один поток. Если ПолучитьЗначение является отменяемым (когда отписался он прекращает генерировать и когда Возобновлена ​​подписка на него начинает генерировать значение снова), вы, вероятно, связать щелчок, чтобы получить значение с помощью switchMap и аннулируют любой устаревшие ПолучитьЗначения до его завершения ,

[1] https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/doc/operators/ajax.md