我正在做一个业余项目来帮助我提高我的 javascript 技能，所以请多多包涵。 简而言之:我正在尝试制作一个用于 super 粉碎兄弟混战 Angular 色的移动式节拍器。我有一些关于何时输入按钮的帧数据，并将在各个帧播放 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>
然后，我有一段不同的代码，我在其中使用 setInterval 编写了一个函数来实际显示所选 Angular 色的所选移动。例如，我在选项中选择了“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;
}
但是一旦我在选项中选择了“Fox”和“Wavedash”，我就无法弄清楚如何让它运行这段代码，而且我也不知道如果我切换到，如何停止 setInterval，例如，“Mario”和“Wavedash”。 So basically I'm trying to combine the two pieces of code that I have now to run a function on interval, when a certain character and a certain move is selected. 抱歉，如果这篇文章有点不清楚，请告诉我是否应该扩展某些内容。感谢阅读。
最佳答案
首先，您需要将这段代码放在一个函数中:
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' 上运行函数 'option'/How to stop setInterval(...);?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40453554/