The Blinking Toilet Light and My `isProcessing` Flag Were Doing the Same Job
Introduction Hello from Japan! 🇯🇵 I am a professional truck driver teaching myself Python and web development while working toward a career transition into web engineering. This article records what I learned after approximately 122 hours of programming study , starting on May 12, 2026. Recently, I added a ripple animation effect to the answer buttons in my self-developed application: 🚛 DPT — Driver Personality Test https://qiita.com/tosane932/items/220d0f7d36bd79b2aa81 At first, I thought it would be a small visual improvement. However, while implementing it, I realized that the blinking light on my toilet control panel and a JavaScript flag named isProcessing were performing exactly the same role. This article explains that connection. It Started as Protection Against Repeated Clicks In DPT, clicking an answer button moves the user to the next question. In the original version, the next question appeared immediately after the button was clicked. However, this created a problem. If a user repeatedly clicked the button, the application continued advancing through the questions at the same speed. In an extreme case, someone could finish all 50 questions in only a few seconds. That would reduce the reliability of the personality test and could also create invalid answer records. To prevent this, I introduced a processing-state flag . let isProcessing = false ; testContainer . addEventListener ( " click " , ( event ) => { if ( isProcessing ) return ; const button = event . target . closest ( " .option-btn " ); if ( ! button ) return ; isProcessing = true ; createRipple ({ currentTarget : button , clientX : event . clientX , clientY : event . clientY }); const qIdx = Number ( button . dataset . qIndex ); const oIdx = Number ( button . dataset . oIndex ); setTimeout (() => { if ( oIdx === - 1 ) { handleAnswer ( qIdx , - 1 , " No answer " , 0 ); } else { const option = shuffledQuestions [ qIdx ]. shuffledOptions [ oIdx ]; handleAnswer ( qIdx , oIdx , option . text , optio