Javascript:运行函数'select'& # 39;选项# 39;/如何停止setInterva

Javascript: Run function on 'select' 'option' / How to stop setInterval(...);?

本文关键字：选项 setInterva 何停止 select 运行 函数 Javascript      更新时间：2023-09-26

我正在做一个爱好项目来帮助我提高我的javascript技能，所以请原谅我。简而言之:我想做的是为《super smash bros》的近战角色制作一个动作集节拍器。我有一些帧数据，当输入一个按钮，并将在各自的帧播放哔哔的mp3声音。所以我想要的是使用一个依赖的下拉菜单，我终于得到了工作后，一些谷歌/修补。其代码如下所示:

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
#category2 option{
    display:none;
}
#category2 option.label{
    display:block;
}
</style>
<body>
<form id="formname" name="formname" method="post" action="submitform.asp" >
    <select name="category1" id="category1">
        <option value="">Select Category1</option>
        <option value="fox">Fox</option>
        <option value="mario">Mario</option>
    </select>

    <select disabled="disabled" id="category2" name="category2">
        <option value>Select Category2</option>

            <!-- FOX: -->
        <option rel="fox">Select: </option>
        <option rel="fox" value="wavedash">Wavedash</option>
        <option rel="fox" value="waveshine">Waveshine</option>
            <!-- MARIO -->
        <option rel="mario">Select: </option>
        <option rel="mario" value="wavedash">Wavedash</option>
    </select>
</form>
</body>
<script>
$(function(){
    var $cat = $("#category1"),
        $subcat = $("#category2");
    $cat.on("change",function(){
        var _rel = $(this).val();
        $subcat.find("option").attr("style","");
        $subcat.val("");
        if(!_rel) return $subcat.prop("disabled",true);
        $subcat.find("[rel="+_rel+"]").show();
        $subcat.prop("disabled",false);
    });
});
</script>
</html>

然后，我有一段不同的代码，其中我使用setInterval编写了一个函数来实际显示所选角色的选定移动。例如，我在选项中选择了"Fox"，然后我选择了Fox移动"Waveshine"，我希望它运行如下代码:

var sound1 = new Audio('beep.mp3'); 
var sound2 = new Audio('beep2.mp3'); 

    var sec = 0;
    var frame = 0;
    var slowDown = 5;
    setInterval( function(){
        frame = ++frame%60;
        document.getElementById("frames").innerHTML="Framecount: "+String(pad(frame));
        if(frame >= 0 && frame <= 4){
            sound1.loop = false;
            sound1.play();
            document.getElementById("test").innerHTML=("⇑");
        } else {
            document.getElementById("test").innerHTML="";
        }
        if(frame >= 4 && frame <= 14){
            if(frame == 4){
                sound2.play();
            }
            document.getElementById("test").innerHTML=("R+⇘");
        }
    }, (1000/60)*slowDown);

    function pad ( val ) { 
        return val > 9 ? val : "0" + val; 
    }

但是我不知道如何使它运行这段代码，一旦我选择了"福克斯"answers"Wavedash"的选项，我也不知道如何停止setInterval，如果我将切换到，例如，"马里奥"answers"Wavedash"。所以基本上，我要把这两段代码结合起来，在间隔上运行一个函数，当一个特定的角色和一个特定的移动被选中时。抱歉，如果这篇文章有点不清楚，请让我知道我是否应该扩展一些东西。谢谢阅读

首先，您需要将这段代码放入一个函数中:

function playSound() {
    var sound1 = new Audio('beep.mp3'); 
    var sound2 = new Audio('beep2.mp3'); 
    var sec = 0;
    var frame = 0;
    var slowDown = 5;
    setInterval( function(){
        frame = ++frame%60;
        document.getElementById("frames").innerHTML="Framecount: "+String(pad(frame));
        if(frame >= 0 && frame <= 4){
            sound1.loop = false;
            sound1.play();
            document.getElementById("test").innerHTML=("⇑");
        } else {
            document.getElementById("test").innerHTML="";
        }
        if(frame >= 4 && frame <= 14){
            if(frame == 4){
                sound2.play();
            }
            document.getElementById("test").innerHTML=("R+⇘");
        }
    }, (1000/60)*slowDown);
}

然后在您的$cat和$subcat onchange事件上，您可以调用playSound方法。

$cat.on("change",function() {
   // Your code
   latestSoundInterval = playSound();
});

setInterval返回一个整数，因此最好在更改类别/子类别时跟踪调用的所有setIntervals。

var soundInterval = setInterval() { .... }

可以使用上述变量作为新的playSound函数的返回类型。

然后停止间隔，你可以使用clearInterval并将其传递回soundInterval变量。

var latestSoundInterval = playSound();
clearInterval(latestSoundInterval); // Stop the set interval function
相关文章：