Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
throttleすげぇぇぇ
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Sigma
October 10, 2022
Programming
0
82
throttleすげぇぇぇ
Sigma
October 10, 2022
Tweet
Share
More Decks by Sigma
See All by Sigma
Proxmox_VE.pdf
seiyasugimoto
0
210
Stable Diffusionで遊んでみた
seiyasugimoto
1
140
EVAフレームワーク
seiyasugimoto
0
110
SSR+SPA
seiyasugimoto
0
150
Nuxtにおける設計
seiyasugimoto
0
95
Atomic Designを ディレクトリ以外で表現
seiyasugimoto
0
84
スマホでPythonしたい
seiyasugimoto
0
71
平文で保存するな!
seiyasugimoto
0
91
ソースコードを読もう
seiyasugimoto
0
91
Other Decks in Programming
See All in Programming
脱 雰囲気実装!AgentCoreを良い感じにWEBアプリケーションに組み込むために
takuyay0ne
3
340
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
470
メタプログラミングで実現する「コードを仕様にする」仕組み/nikkei-tech-talk43
nikkei_engineer_recruiting
0
200
20260315 AWSなんもわからん🥲
chiilog
2
160
RAGでハマりがちな"Excelの罠"を、データの構造化で突破する
harumiweb
9
2.9k
仕様漏れ実装漏れをなくすトレーサビリティAI基盤のご紹介
orgachem
PRO
6
2.4k
守る「だけ」の優しいEMを抜けて、 事業とチームを両方見る視点を身につけた話
maroon8021
3
1.1k
GoのDB アクセスにおける 「型安全」と「柔軟性」の両立 - Bob という選択肢
tak848
0
240
Everything Claude Code OSS詳細 — 5層構造の中身と導入方法
targe
0
140
PHPのバージョンアップ時にも役立ったAST(2026年版)
matsuo_atsushi
0
160
[SF Ruby Feb'26] The Silicon Heel
palkan
0
120
AWS×クラウドネイティブソフトウェア設計 / AWS x Cloud-Native Software Design
nrslib
16
3.3k
Featured
See All Featured
エンジニアに許された特別な時間の終わり
watany
106
240k
The Curious Case for Waylosing
cassininazir
0
270
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
Claude Code のすすめ
schroneko
67
220k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
100
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.2k
Reality Check: Gamification 10 Years Later
codingconduct
0
2.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
9.9k
Side Projects
sachag
455
43k
Making the Leap to Tech Lead
cromwellryan
135
9.8k
Evolving SEO for Evolving Search Engines
ryanjones
0
160
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
Transcript
throttleがすごい話 Vueのリアクティブシステム
NLP のしぐまです! • 株式会社エヌエルプラスに去年入社しました。 ◦ リファラル採用やってます! • 自分はイベント配信プラットフォーム (受託) 等やってます。
• 現在は主にNuxtとGoとGCPを触っています。 ◦ フルスタックです!何でも屋とも言う…なぜかGoも触ってる… • シニアエンジニアです。
Vueのリアクティブシステム
変数の書き換えが速さがいやらしい場合 • 変数の書き換えに反応して重たい描画機能が走っている場合。書き換えの速さに よって死ぬ。 ◦ 経験したケースでは秒間数十回走るとつらい。 ◦ 高速なチャットとか。 • throttle
で書き換え回数を制限してしまえば安定するのではないか?
throttleの概要 • 関数の実行回数をNミリ秒に一回に制限できる。 ◦ 500 ミリ秒なら秒間 2 回 • Nミリ秒内の実行は無視されず、次の実行可能タイミングに実行される。
• lodashに入ってる
どう制限するか • ウォッチャに throttle で ラップした update 関数 を仕込み、更新回数の 制限された変数を実際
にその変数を描画する コンポーネントに渡す。 DRAW COMPONENT throttled variable: drawするコンポーネントへ渡 す。 update function: throttled variableを更新 watch: callback に throttle update function, 高速 で更新される store の変数を watch STORE
こんな感じ
lodash の throttle が優秀 • 公式ドキュメントから参照され ていた記事 https://css-tricks.com/debou ncing-throttling-explained-e xamples/
にあるデモを一部 throttle 用に書き換えた。
ユースケース(throttle, debounce) • 複数回の誤クリックの対策 • スクロールイベント等の制限 • リアクティブシステムの暴走を止める
イベント駆動な JavaScript を制する