Question

我正在做一个爱好项目来帮助我提高我的javascript技能，所以请耐心等待。简而言之：我想要制作的是超级粉碎兄弟近战角色的移动节拍器。我有一些帧数据用于何时输入按钮，并将在相应的帧播放beep.mp3声音。所以我想要的是使用依赖的下拉列表，我在google搜索/修改后终于开始工作了。代码如下：

<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'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; 
    }

但是当我在选项中选择“Fox”和“Wavedash”时，我无法弄清楚如何让它运行此代码，而且我也不知道如果我切换到如何停止setInterval，例如，“Mario”和“Wavedash”。所以基本上我正在尝试将我现在拥有的两段代码组合起来，以便在选择某个字符和某个移动时间隔运行一个函数。对不起，如果这篇文章有点不清楚，请告诉我是否应该扩展一些东西。谢谢你的阅读。

Answer 1

首先，您需要将此代码放在函数中：

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

Javascript：在'select''选项'上运行函数/如何停止setInterval（...）;？

1 个答案: