当另一个被调用并重置为 0 时停止正在运行的循环/函数

Question

我有一个渲染旋转，旋转是通过不断改变 y position

我有 2 个按钮，1 个用于向左旋转，1 个用于向右旋转，还有一个 slider 表示旋转速度 -

我的问题是，一旦我按下一个按钮，它就会保持 function 运行，我需要在调用相反的 function 时停止 function，反之亦然

        <button id="LeftBTN" type="button">Rotate Left</button>
        <button id="RightBTN" type="button">Rotate Right</button>
>
        <input class="bar" type="range" id="speedinput" min="0" max="100"   value="0" onchange="speed.value=value"/>
        <span class="highlight"></span>
        <output id="speed">0</output>


            var speedslider = document.getElementById("speedinput");
            speedslider.addEventListener("change",LeftBTN.onclick);
            speedslider.addEventListener("change",RightBTN.onclick);
            zoomOutButton.addEventListener("change", zoomOutFunction);
        //set rotation functions
            const rotategroupright = function() {
                requestAnimationFrame(rotategroupright);
                group.rotation.y -= 0;
                group.rotation.y += speedslider.value/10000;
                console.log(group.rotation.y)
            };

            const rotategroupleft = function() {
                requestAnimationFrame(rotategroupleft);
                group.rotation.y +=0;
                group.rotation.y -= speedslider.value/10000;
                console.log(group.rotation.y)
            };
        //start rotation left
            LeftBTN.onclick = function() {
                speedslider.value = 0;
                speed.value = [0];
                rotategroupleft();
            };
        //start rotation right
            RightBTN.onclick = function() {
                speedslider.value = 0;
                speed.value = [0];
                rotategroupright();
            };

Answer 1

试试下面的方法怎么样？ 与其为左右使用两个不同的函数，不如将它们组合成一个名为 rotateGroup() 的 function 并使用条件语句来控制旋转方向。 这需要在函数之外有一个“方向”变量，以便他们可以访问它。

然后您所要做的就是更改 onclick 处理程序以设置方向变量的值。 要启动 animation，您可以在页面加载时调用 rotateGroup()，或者像我在本例中所做的那样，在第一次按下按钮时启动 animation，并使用另一个 if 语句来防止按钮多次调用 rotateGroup() .

如果这不是您想要的，请查找 cancelAnimationFrame()。 如果您为 requestAnimationFrame() 分配一个全局 id，您将能够调用 cancelAnimationFrame(idGoesHere) 来停止 animation。我不确定哪种方法更好，但这可能更接近您所要求的答案。

developer.mozilla.org 上有关 cancelAnimationFrame() 的更多信息

以下是第一个建议的示例。 让我知道这是否有帮助，或者是否有问题。 否则，快乐的动画。 干杯!

    var direction = "";
    var stopped = true;
    const rotateGroup = function() {
                if(direction == "left"){
                  group.rotation.y +=0;
                  group.rotation.y -= speedslider.value/10000;
                }else {
                  group.rotation.y -= 0;
                  group.rotation.y += speedslider.value/10000;
                }
                console.log(group.rotation.y);
                requestAnimationFrame(rotateGroup);
            };
            
        //start rotation left
            LeftBTN.onclick = function() {
                speedslider.value = 0;
                speed.value = [0];
                direction = "left";
                if(stopped){
                  stopped = false;
                  rotateGroup();
                }  
            };
        //start rotation right
            RightBTN.onclick = function() {
                speedslider.value = 0;
                speed.value = [0];
                direction = "right";
                if(stopped){
                  stopped = false;
                  rotateGroup();
                } 
            };