如何在 API 服务器响应上重置 setTimeout 循环

Question

我目前正在尝试通过 html 文档轻松创建自己的“智能灯”controller。 出于测试目的，我创建了以下内容。

An HTML document where when a button is clicked, an API POST request is sent to my localhost API server (running node.js) carrying Information regarding 3 colors which will eventually be cycled around. 然后，本地托管的服务器将接收到信息，并开始我选择的 colors 的循环序列。 照明和信息传递都按预期工作，但我遇到了两个我没有计划解决方案的问题。

1. 如果多次按下按钮会发生什么（如何停止当前循环）
2. 如何设置循环的持续时间和/或循环的次数。

尽管我可以通过创建一个在每个循环上递增的值来解决第二个问题，并且在某一时刻不得大于每个 POST 请求专门选择的数字（然后将在那里退出循环），无论我尝试什么，我似乎无法找到一种方法来阻止整个循环与自身重叠并导致非常可怕的灯光秀体验。

是否有任何标准或合理的方式让我停止运行循环（或完全重新设计它），然后立即运行更新版本？ 我将非常感谢您的帮助。

服务器代码（在将 POST 请求发送到有效 URL 时运行）

router.post('/', function(req, res) {
    song = (req.body.song)
    color1 = parseInt(req.body.color1);
    color2 = parseInt(req.body.color2);
    color3 = parseInt(req.body.color3);

    light2.power(true, 600, { hue: color1, saturation: 100, color_temp: 0, brightness: 0 });
    light.power(true, 600, { hue: color1, saturation: 100, color_temp: 0, brightness: 0 });

   

    function colors() {

        setTimeout(function () {


            // Part 1
            light2.power(true, 1500, { hue: color1, saturation: 100, color_temp: 0, brightness: 100 });
            light.power(true, 600, { hue: color1, saturation: 100, color_temp: 0, brightness: 100 });
            console.log(color1)

            //Part 2
            setTimeout(function () {
                light2.power(true, 1500, { hue: color2, saturation: 100, color_temp: 0, brightness: 100 });
                light.power(true, 1500, { hue: color2, saturation: 100, color_temp: 0, brightness: 100 });
                console.log(color2)
            }, 2000);

            //Part 3
            setTimeout(function () {
                light2.power(true, 1500, { hue: color3, saturation: 100, color_temp: 0, brightness: 100 });
                light.power(true, 1500, { hue: color3, saturation: 100, color_temp: 0, brightness: 100 });
                console.log(color3)
            }, 4000);
            colors();
        }, 6150);
    }

   setTimeout(function(){
        colors();
   }, 1000);



    console.log(req.body);
    res.send(req.body);

    
});

客户端代码（当用户按下“播放”时运行）

            var songChoice = "";
            var color1Choice = "";
            var color2Choice = "";
            var color3Choice = "";
            var songURL = "";
            var currentAudio = "";

            function Selected(songOBJ, songPicked, color1Assigned, color2Assigned, color3Assigned) {
                songChoice = songPicked;
                color1Choice = color1Assigned;
                color2Choice = color2Assigned;
                color3Choice = color3Assigned;
                console.log(currentAudio.length)

                if (currentAudio.duration > 1) {
                    currentAudio.pause();
                }
            
                songURL = songOBJ.getAttribute("data-song")
                currentAudio = new Audio("Content/Songs/" + songURL);
                currentAudio.play();
                
            }
        $(document).ready(function() {


            $('.Play').click(function() {
                $('.Play').toggleClass('Play-Active');
    
                var musicData = {
                    song: songChoice, 
                    color1: color1Choice, 
                    color2: color2Choice, 
                    color3: color3Choice,
                };
    
                $.ajax({
                    url : (server URL),
                    type: "POST",
                    data : musicData,
                    async : true,
                    success: function(response, textStatus, jqXHR) {
                        console.log(response);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log(jqXHR);
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                });
            })
        })

Answer 1

要停止您开始的超时，请使用从setTimeout返回的“间隔”以及clearTimeout function，如下所示：

const timeout = setTimeout(doSomething, 5000);
clearTimeout(timeout); // cancel the timeout

Answer 2

如果您希望能够清除超时，您可以这样做：

const timeoutID = setTimeout(function () {
                light2.power(true, 1500, { hue: color2, saturation: 100, color_temp: 0, brightness: 100 });
                light.power(true, 1500, { hue: color2, saturation: 100, color_temp: 0, brightness: 100 });
                console.log(color2)
            }, 2000);

clearTimeout(timeoutID);