字幕文本切换器启停及重置功能故障求助与优化方案咨询

Hey there! Let's get your subtitle switcher's start/stop/reset functions working properly, and also clean up the code for better maintainability. Here's a breakdown of the issues and a revised solution:

What Was Wrong With the Original Code #

• Stop Function: Your buttonStop tried to overwrite the changer function, which doesn't actually stop the running timer. Since you used recursive setTimeout, you need to track the timer ID to cancel it.
• Start Function: Using setInterval alongside recursive setTimeout caused conflicting timer triggers, leading to erratic text switching.
• Reset Function: The buttonClear approach was incorrect—you didn't properly reset the index or stop existing timers before restarting.

Revised Full Code #

<!DOCTYPE html>
<html>
<head>
    <style>
        #transbox {
            font-family: Arial, sans-serif;
            color: black;
            text-align: center;
            margin-top: 80px;
        }
    </style>
</head>
<body onLoad="changer()">
    <div id="transbox"></div>
    <button type="button" onclick="buttonShow()">CC Open</button>
    <button type="button" onclick="buttonHide()">CC Close</button>
    <button type="button" onclick="buttonStop()">CC Stop</button>
    <button type="button" onclick="buttonPlay()">CC Play</button>
    <button type="button" onclick="buttonReset()">CC Reset</button>

    <script>
        // Use array literal for cleaner syntax
        const texter = [
            'good day',
            'How can I be stopped and started ?',
            '',
            'everything should start again from the beginning with the reset button.',
            'that would be great !!!',
            'Many thanks for the help',
            '',
            'Ciao'
        ];
        
        let i = 0;
        let timerId = null; // Track the setTimeout ID to control playback

        function changer() {
            // Clear any existing timer to prevent duplicate triggers
            if (timerId) clearTimeout(timerId);
            
            // Update the subtitle text
            document.getElementById('transbox').innerHTML = texter[i];
            
            // Increment index, loop back to start when reaching the end
            i = (i + 1) % texter.length;
            
            // Set next timer for the switch
            timerId = setTimeout(changer, 2500);
        }

        const info = document.getElementById("transbox");
        info.style.display = "none";

        // Show subtitle box
        function buttonShow() {
            info.style.display = "block";
        }

        // Hide subtitle box
        function buttonHide() {
            info.style.display = "none";
        }

        // Stop playback
        function buttonStop() {
            if (timerId) {
                clearTimeout(timerId);
                timerId = null; // Reset the ID to avoid stale references
            }
        }

        // Start/resume playback
        function buttonPlay() {
            // Only start if not already running
            if (!timerId) {
                changer();
            }
        }

        // Reset to first subtitle and restart playback
        function buttonReset() {
            buttonStop(); // Stop any ongoing playback
            i = 0; // Reset index to first item
            document.getElementById('transbox').innerHTML = texter[i]; // Show first text immediately
            i = 1; // Adjust index so next switch goes to the second item
            buttonPlay(); // Resume playback
        }
    </script>
</body>
</html>

Key Improvements #

• Timer Control: Added timerId to track the active setTimeout, allowing us to reliably stop and resume playback.
• Cleaner Syntax: Used array literals instead of new Array, and passed function references to setTimeout (safer than string evaluation).
• Robust Reset: The reset function now stops playback, resets the index, shows the first subtitle immediately, and resumes playback properly.
• Prevent Duplicate Triggers: The changer function clears existing timers before setting a new one, avoiding overlapping switches.
• Fixed Typos: Corrected the misspelled buttonSrart to match the function name buttonPlay.

内容的提问来源于stack exchange，提问作者JaDoLo