Fatal编程技术网
  • javascript/
  • Javascript：在'；选择''；选项'；/如何停止setInterval（…）；？

Javascript：在'；选择''；选项'；/如何停止setInterval（…）；？

javascript jquery select

Javascript：在'；选择''；选项'；/如何停止setInterval（…）；？,javascript,jquery,select,intervals,Javascript,Jquery,Select,Intervals,我正在做一个爱好项目来帮助我提高javascript技能，所以请耐心听我说。 简言之：我想为超级粉碎兄弟的近战角色制作一个移动节拍器。我有一些帧数据用于何时输入按钮，并将在相应的帧中播放beep.mp3声音。 因此，我希望使用一个相关的下拉列表，在谷歌搜索/修补之后，我终于可以使用它了。其代码如下所示： <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&g

我正在做一个爱好项目来帮助我提高javascript技能，所以请耐心听我说。 简言之：我想为超级粉碎兄弟的近战角色制作一个移动节拍器。我有一些帧数据用于何时输入按钮，并将在相应的帧中播放beep.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>


#类别2选项{
显示：无；
}
#category2 option.label{
显示：块；
}
选择类别1
福克斯
马里奥
选择类别2
选择：
波浪冲击
Waveshine
选择：
波浪冲击
$（函数（）{
变量$cat=$（“#类别1”），
$subcat=$（“#类别2”）；
$cat.on（“更改”，函数（）{
var_rel=$（this.val（）；
$subcat.find（“option”）.attr（“style”和“）；
$subcat.val（“”）；
如果（！\u rel）返回$subcat.prop（“disabled”，true）；
$subcat.find（“[rel=“+\u rel+”]）.show（）；
$subcat.prop（“禁用”，false）；
});
});
然后，我有一段不同的代码，其中我使用setInterval编写了一个函数来实际显示选定角色的选定移动。例如，我在选项中选择“Fox”，然后选择Fox'move“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; 
    }

var sound1=新音频（'beep.mp3'）；
var sound2=新音频（'beep2.mp3'）；
var-sec=0；
var帧=0；
var=5；
setInterval（函数（）{
帧=++帧%60；
document.getElementById（“frames”）.innerHTML=“Framecount:”+字符串（pad（frame））；
如果（帧>=0&&frame=4&&frame 9？val:“0”+val；
}
但一旦我在选项中选择了“Fox”和“Wavedash”，我就不知道如何让它运行这段代码，而且如果我切换到“Mario”和“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);
}

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

var soundInterval = setInterval() { .... }
您可以使用上述变量作为新的
playSound
函数的返回类型

然后，要停止间隔，可以使用
soundInterval
变量将其传回

var latestSoundInterval = playSound();

clearInterval(latestSoundInterval); // Stop the set interval function
能否将代码放入代码段中？要使函数在选择选项时运行，请将事件处理程序连接到
select
的“change”事件。要取消间隔，必须首先将变量（比如“timer”）设置为
setInterval
的返回值，如
var timer=setInterval>（功能…
然后使用
清除间隔（计时器）
您希望它停止的地方。停止
setInterval
的最佳方法不是首先使用它。而是使用
setTimeout
，如果它仍然有效，让timeout函数重新触发自身。这使它非常容易控制。
setInterval
并不是那么容易控制的。感谢您的回复！我已经完成了我已经包装了我的playSound函数，并将
latestSoundInterval=playSound（）；
添加到
$cat.on（“change”，function（）{//bla}）中
code，但我不确定在哪里添加代码来停止间隔？@Pazzle-您可以将其添加到类别/子类别
onchange
事件，甚至创建一个新按钮。 
var latestSoundInterval = playSound();

clearInterval(latestSoundInterval); // Stop the set interval function