Помогите с заданием по rxjs
Здраствуйте. Прохожу видео уроки по Расширенным возможностям JS, тема о библиотеке RxJS и вот там задали вот такое задание:
Создайте приложение, в котором на странице будет 3 блока с рекламой. Создайте потоки, которые каждую секунду генерируют вывод 2 случайных чисел. При нажатии на блок – должна происходить подписка, которая, используя данные два числа – меняет расположение элемента рекламы на странице. Для каждого блока – будет своя подписка, которая будет останавливаться, если пользователь кликнет по рекламе повторно. Используйте холодный Observable для блоков.
В итоге что мог то и сделал, все работает но чувствую что реализовать это задание можно куда быстрее и использовать для этого меньше кода (так как здесь смесь RxJS и простого JS) Посмотрите код и подскажите как сделать его с помощью именно библиотеки RxJS а так же хотел спросить насколько важна сейчас эта библиотека?Так как при помощи обычного JS это задание было бы легче выполнить
<div id="rekl1">Блок с рекламой 1</div>
<div id="rekl2">Блок с рекламой 2</div>
<div id="rekl3">Блок с рекламой 3</div>
</div>
<script src="https://unpkg.com/rxjs@^7/dist/bundles/rxjs.umd.min.js"></script>
<script>
const {map,tap}=rxjs.operators
const{Observable,concat}=rxjs;
let flag=false;
let black=false;
let mlack=false;
let reklamaOne=document.querySelector("#rekl1");
let reklamaTwo=document.querySelector("#rekl2");
let reklamaThree=document.querySelector("#rekl3");
let cold$=Observable.create((observer)=>{
observer.next(Math.random()*1000)
})
let one= rxjs.fromEvent(reklamaOne,"click").pipe(tap(e=>
{
if(flag){
one.unsubscribe()
}
flag=!flag
}
)).subscribe(x=>{
cold$.pipe(tap(x=>reklamaOne.style.left=x+"px")).subscribe(name=>{
cold$.pipe(tap(x=>reklamaOne.style.top=x+"px")).subscribe(x=>{
console.log(x)
})})})
let two= rxjs.fromEvent(reklamaTwo,"click").pipe(tap(e=>
{
if(black){
two.unsubscribe()
}
black=!black
}
)).subscribe(x=>{
cold$.pipe(tap(x=>reklamaTwo.style.left=x+"px")).subscribe(name=>{
cold$.pipe(tap(x=>reklamaTwo.style.top=x+"px")).subscribe(x=>{
console.log(x)
})})})
let three= rxjs.fromEvent(reklamaThree,"click").pipe(tap(e=>
{
if(mlack){
three.unsubscribe()
}
mlack=!mlack
}
)).subscribe(x=>{
cold$.pipe(tap(x=>reklamaThree.style.left=x+"px")).subscribe(name=>{
cold$.pipe(tap(x=>reklamaThree.style.top=x+"px")).subscribe(x=>{
console.log(x)
})})})
```