์ด๋ฒ์๋ RxJS์ ๋ํ ๋ด์ฉ์
๋๋ค. Reactive Programming์ ์์ฆ ํซํ ์ฃผ์ ์ฌ์ ํ๋ฒ ๋ค๋ฃจ์ด ๋ดค์ต๋๋ค. ๋ด์ฉ์ ์ค๊ฐ์ฏค์ ์๋ Debounce์ Throttle์ ๋ํ ์ค๋ช
์
๋๋ค.
์ ์ฒด ๋ถ๋์ ๋๋ฌด ๊ธธ์ด์ ์ฃผ์๋ถ๋ถ ํ ๋ ๊ตฐ๋ฐ๋ง 1๋ถ ์ดํ๋ก ๋ฐ์ทํ์ฌ mp3ํ์ผ๋ก ๋ง๋ค๊ณ ์์ต๋๋ค.
์ฆ ํ ์ฃผ์ ๋น 1๋ถ ์ดํ ๋ถ๋์ mp3ํ์ผ์ด ํ ๋๊ฐ์ฉ ์ ๊ณต๋๊ฒ ์ต๋๋ค. ๋๋จธ์ง ๋ถ๋ถ์ ๋ฆฌ์ค๋ ์ฐ์ต ํ์๋ฉด ๋๊ฒ ์ต๋๋ค.
๊ณต๋ถํ๋ 4๋จ๊ณ ๋ฐฉ๋ฒ์ ์๋์ ๊ฐ์ต๋๋ค.
1๋ถ ์ดํ ๋ถ๋์ ๋ฒ์ญ
์ ์ฒด ๋ฃ๊ธฐ ๋๋ฒ
๋ฌธ์ฅ ๋ฃ๊ณ ๋ฐ๋ผ ๋งํ๊ธฐ ๋๋ฒ
ํ๊ตญ์ด๋ก ๋ฃ๊ณ ์์ด๋ก ๋งํ๊ธฐ ํ๋ฒ => ์ ์ผ ์ค์ ํฉ๋๋ค!!!!
ํ๋ฃจ์ ํ์๊ฐ ์ด์ ๋ค์ผ๋ฉด์ ๋งํ๊ธฐ ์ฐ์ตํ๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค.
*** ๊ฐ๋ฐ์ ๋งค์ผ ์์ด๋ ์ ๊ฐ ๊ฐ์ธ์ ์ผ๋ก ๊ณต๋ถํ๊ธฐ ์ํด ๋ง๋ mp3ํ์ผ์ ํน์ ๋ค๋ฅธ ๋ถ์๊ฒ๋ ๋์์ด ๋ ๊น ํด์ ๊ณต์ ํ๊ณ ์๋ ๊ฒ์ ๋๋ค. ์ ๋ชฉ์๋ฆฌ๋ ํฌํจ๋์ด ์๊ณ , ๋ถ์กฑํ ์์ด ์ค๋ ฅ์ผ๋ก ๋ฒ์ญํ ๊ฒ์ด๋ผ ์๋ชป๋์์ ์๋ ์์ต๋๋ค. ์ ๋ชฉ์๋ฆฌ์ ๋๋ผ์ง ๋ง์๊ณ ์ด์ํ ๋ถ๋ถ์ ๋๊ธ๋ก ์๋ ค ์ฃผ์๋ฉด ๊ฐ์ฌํ๊ฒ ์ต๋๋ค. 0*, ํน์๋ผ๋ ๋์์ด ๋์ จ๋ค๋ฉด upvote ๋ถํ๋๋ฆฝ๋๋ค ^^; ***
mp3 ํ์ผ ๋ค์ด๋ก๋: https://drive.google.com/open?id=1ZtosW7AT9X3cXokwf541bQwI1TiTKv9l
ํ ๋์์ ๋งํฌ:
----- mp3 script -----
Now let's take a look at Debounce and Throttle.
These two operators allow you to deal with events that you met way more values than actually need.
The mousemove event is a perfect example on the Dom.
So we'll subscribe to the mouse event and then we'll print the type of event here on the screen.
Let's first do this without any throttling or debouncing.
You can see it only takes about two seconds to get hundreds of events printed on the screen.
We can use the throttle to get the very first event and then set a delay before it starts emitting any other events.
In this case, we'll use the throttle time helper and pass it 1000 milliseconds.
So now if we mouse over the screen we'll get the first event and then it will wait at least one second before sending any additional events.
Debounce does almost the same exact thing but instead of giving us the first event It gives us the last event.
So first we mouse over and there's a delay then after that delay it will emit the most recent event.
Debounce is especially useful when you want to make sure the user is stopped doing something such as typing in an autocomplete form or something similar.
--- ๋ฒ์ญ ---
์ ์ด์ Debounce์ Throttle์ ๋ํด ๋ด
์๋ค.
์ด ๋ ์ฐ์ฐ์๋ค์ ์ค์ ํ์ํ ๊ฒ๋ณด๋ค ๋ ๋ง์ ๊ฐ๋ค์ ๋ง๋ฌ์๋ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ ์ ์๋๋ก ํฉ๋๋ค.
Dom์์ ๋ง์ฐ์ค๋ฌด๋ธ ์ด๋ฒคํธ๋ ์๋ฒฝํ ์์
๋๋ค.
์ฐ๋ฆฌ๋ ๋ง์ฐ์ค ์ด๋ฒคํธ์ ๊ฐ์
ํ๊ณ ์คํฌ๋ฆฐ์ ์ด๋ฒคํธ ํ์
์ ์ถ๋ ฅํ ๊ฒ์
๋๋ค.
์ฒซ์งธ๋ก ์ฐ๋กํ๋ง๊ณผ ๋๋ฐ์ด์ฑ ์์ด ํด๋ด
์๋ค.
๋จ์ง 2์ด๋์ ๋ช๋ฐฑ๊ฐ์ ์ด๋ฒคํธ๋ค์ด ํ๋ฉด์ ์ถ๋ ฅ๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค.
์ฐ๋กํ์ ์ฌ์ฉํ์ฌ ์ฒซ๋ฒ์งธ ์ด๋ฒคํธ๋ฅผ ๊ฐ์ง๊ณ ๊ทธ๋ฆฌ๊ณ ๋ค๋ฅธ ์ด๋ฒคํธ ๋ค์ด ๋ฐ์ํ๊ธฐ ์ ์ ์ง์ฐ์ ์ค์ ํ ์ ์์ต๋๋ค.
์ด ๊ฒฝ์ฐ, ์ฐ๋กํ ์๊ฐ ๋์์๋กค ์ฌ์ฉํ ๊ฒ์ด๊ณ 1000๋ฐ๋ฆฌ์ด๋ฅผ ๋ฃ๊ฒ ์ต๋๋ค.
์ด์ ์ฐ๋ฆฌ๊ฐ ๋ง์ฐ์ค๋ฅผ ์คํฌ๋ฆฐ์์ ์ฌ๋ฆฌ๋ฉด ์ฐ๋ฆฌ๋ ์ฒซ๋ฒ์งธ ์ด๋ฒคํธ๋ฅผ ์ป์ ๊ฒ์ด๊ณ ,
๊ทธ๋ฆฌ๊ณ ์ด๋ค ์ถ๊ฐ์ ์ธ ์ด๋ฒคํธ๋ค์ ๋ณด๋ด๊ธฐ ์ ์ ์ ์ด๋ 1์ด ๊ธฐ๋ค๋ฆด ๊ฒ์
๋๋ค.
๋๋ฐ์ด์ค๋ ๊ฑฐ์ ๋น์ทํ์ง๋ง ์ฒซ๋ฒ์งธ ์ด๋ฒคํธ ๋์ ๋ง์ง๋ง ์ด๋ฒคํธ๋ฅผ ์ฐ๋ฆฌ์๊ฒ ์ค๋๋ค.
์ฒซ๋ฒ์งธ๋ก ์ฐ๋ฆฌ๊ฐ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๋ฉด ์ง์ฐ์ด ๋ฐ์ํ๊ณ ๊ทธ๋ฆฌ๊ณ ๊ทธ ์ง์ฐ ํ์ ๊ฐ์ฅ ์ต๊ทผ ์ด๋ฒคํธ๋ฅผ ๋ฐ์ ์ํฌ ๊ฒ์
๋๋ค.
๋๋ฐ์ด์ค๋ ์ฌ์ฉ์๊ฐ ์ด๋ค ๊ฒ ์ฆ ์๋ ์์ฑํผ์ด๋ ๋น์ทํ ๊ฒ์ ํ๋ค๊ฐ ์ ์งํ ๊ฒ์ ํ์ธํ๊ธธ ์ํ ๋ ํน๋ณํ ์ ์ฉํฉ๋๋ค.