Javascript：在'select'選項'上運行函數'/如何停止setInterval（...）;？

我正在做一個愛好項目來幫助我更好地使用JavaScript技能，所以請耐心等待。簡而言之：我試圖製作的是超級粉碎兄弟近戰角色的動感節拍器。我有一些關於何時輸入按鈕的幀數據，並會在各個幀處播放beep.mp3聲音。所以我想要的是使用一個依賴下拉菜單，我最終在一些Google搜索/修補之後得到了工作。以上操作的代碼如下所示：Javascript：在'select'選項'上運行函數'/如何停止setInterval（...）;？

<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的實際顯示所選字符的選擇移動的功能。例如，我選擇了「狐狸」的選項，然後，我選擇福克斯的舉動‘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」，並且我也不知道如果我切換到例如「Mario」和「Wavedash」如何停止setInterval。所以基本上我試圖結合兩段代碼，現在我已經運行一個函數的時間間隔，當某個字符和某個移動被選中。對不起，如果這篇文章有點不清楚，請讓我知道我是否應該擴大一些東西。謝謝閱讀。

來源

2016-11-06 Pazzle

你可以把你的代碼放入代碼片段嗎？ – tmslnz

爲了在選擇選項時運行該函數，請將事件處理程序連接到「select」的「更改」事件。要取消間隔，你必須首先設置一個變量（比如說「timer」）到'setInterval'的返回值，比如'var timer = setInterval（function ....'然後使用'clearInterval（timer）'在那裏你希望它停止 –

停止'setInterval'的最好方法就是不要在第一時間使用它，而是使用'setTimeout'並讓超時函數在它仍然有效的情況下重新觸發自己。控制''setInterval'沒有什麼特別容易控制的 – Spudley

首先，你需要把一個函數內的代碼：

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平變化的事件，那麼你可以調用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

來源

2016-11-06 19:32:51

感謝您的回覆！我一直在嘗試，但我還是無法完成它的工作，我已經包裝了我的playSound函數，並添加了'latestSoundInterval = playSound（）;'到'$ cat.on（「change」，function（）{// bla bla}）;'代碼，但我不確定在哪裏添加代碼來停止間隔？ – Pazzle

@ Pazzle - 你可以將它添加到類別/子類別'onchange'事件中，甚至創建一個新的按鈕。 –

Javascript：在'select'選項'上運行函數'/如何停止setInterval（...）;？

回答

相關問題