← Salesforce Interview Insights
The DOM part was fine, took maybe ten minutes.
Start by clarifying requirements and edge cases, then outline a clean state-machine approach using setTimeout for precise timing and a single source of truth for the active light. Implement pause/resume by tracking remaining time and cleanup by clearing timers and removing event listeners.
Pro tip: Use a state machine with explicit states and transitions, and encapsulate timer logic in a class or module to avoid global variables and make pause/resume and cleanup straightforward.
Confirm the exact durations, whether the cycle starts on red, and if pause/resume should preserve remaining time. Ask about accessibility and visual design expectations.
Define states (red, yellow, green) and transitions with associated durations. Use a single variable to track the current state and a function to transition to the next state.
Use setTimeout for each state's duration, storing the timer ID. For pause, clear the timeout and record the remaining time; for resume, set a new timeout with the remaining time.
Implement pause/resume by tracking elapsed time and remaining time. Provide a cleanup method that clears any active timers and removes event listeners to prevent memory leaks.
Test edge cases like rapid pause/resume and cleanup during transitions. Discuss trade-offs between setTimeout and setInterval, and between using CSS classes vs inline styles.
AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.