我有一个程序，当您单击一个按钮时，会循环播放一系列 5 个灯光和声音(基本上，表格背景颜色中的某些单元格会按顺序改变)。我有另一个按钮“取消”取消它。但是，当您单击取消时，它仍然会完成当前循环。理想情况下，我希望它在循环中停止并将所有内容重置为开始(或结束)时的状态。
这是我的 javaScript..
$(document).ready(function() {
var note1 = new Audio("audio/1.wav");
var note2 = new Audio("audio/2.wav");
var note3 = new Audio("audio/3.wav");
var note4 = new Audio("audio/4.wav");
var note5 = new Audio("audio/5.wav");
var isPlaying = false;
var speed = 500;
var buttonPressed = false;
var interval;
$("#button1").click(function(){
if (!buttonPressed) {
noteLoop();
clearInterval(interval);
interval = setInterval(noteLoop, 5000);
$("#button1").text("MAKING CONTACT");
};
$("#button2").click(function() {
clearInterval(interval);
$("#button1").text("CLICK TO MAKE CONTACT");
buttonPressed = false;
$.finish();
})
});
var noteLoop = function() {
if (!isPlaying){
playNotes();
};
}
var playNotes = function() {
setTimeout(play1, speed);
setTimeout(play2, speed * 2);
setTimeout(play3, speed * 3);
setTimeout(play4, speed * 4.6);
setTimeout(play5, speed * 6.2);
setTimeout(function(){
resetNotes();
isPlaying = false;
}, speed * 9);
};
var play1 = function() {
isPlaying = true;
$("table tr:nth-child(2) td:nth-child(2)").addClass("yellow");
$("table tr:nth-child(2) td:nth-child(2)").hide();
$("table tr:nth-child(2) td:nth-child(2)").fadeIn('fast');
note1.play();
};
var play2 = function() {
$("table tr:nth-child(2) td:nth-child(2)").removeClass("yellow");
$("table tr:nth-child(3) td:nth-child(3)").addClass("green");
$("table tr:nth-child(3) td:nth-child(3)").hide();
$("table tr:nth-child(3) td:nth-child(3)").fadeIn('fast');
note2.play();
};
var play3 = function() {
$("table tr:nth-child(3) td:nth-child(3)").removeClass("green");
$("table tr:nth-child(3) td:nth-child(1)").addClass("blue");
$("table tr:nth-child(3) td:nth-child(1)").hide();
$("table tr:nth-child(3) td:nth-child(1)").fadeIn('fast');
note3.play();
};
var play4 = function() {
$("table tr:nth-child(3) td:nth-child(1)").removeClass("blue");
$("table tr:nth-child(1) td:nth-child(4)").addClass("white");
$("table tr:nth-child(1) td:nth-child(4)").hide();
$("table tr:nth-child(1) td:nth-child(4)").fadeIn('fast');
note4.play();
};
var play5 = function() {
$("table tr:nth-child(1) td:nth-child(4)").removeClass("white");
$("table tr:nth-child(4) td:nth-child(2)").addClass("orange");
$("table tr:nth-child(4) td:nth-child(2)").hide();
$("table tr:nth-child(4) td:nth-child(2)").fadeIn('fast');
note5.play();
};
var resetNotes = function() {
$("table tr:nth-child(4) td:nth-child(2)").removeClass("orange");
};
});
我也意识到我可能以完全错误的方式处理这件事，我想做的事情甚至可能无法实现。我还希望它在每次循环时变得越来越快，但我想不出任何方法来实现这一点:(
感谢您的帮助。
最佳答案
根据您的代码摘录，您可以将名为“timeupdate”的事件监听器添加到音频元素，并在其处理程序内部检查是否有任何取消请求，如果再次重新启动循环......下面是摘录代码“我没有测试: (但它只是为你简化了这个想法”
<html>
<body>
<audio id="myAudio"></audio>
<button id="button1">Start</button>
<button id="button2">Cancel</button>
<script>
var myAudio = document.getElementById("myAudio");
//keep your notes in array
var audios = ["audio/1.wav", "audio/2.wav", ...];
var isCancelled = false;
var currentTrack = null;
myAudio.addEventListener("timeupdate", function(){
if(isCancelled){
//reset here .. do your stuff here according to current track
myAudio.pause();
}
});
function noteLoop(){
for (i = 0;i<audios.length; i++){
currentTrack = audios[i];
play(audios[i]);
}
}
function play(track){
if(track){
//do your stuff here according to track
$("table tr:nth-child(2) td:nth-child(2)").addClass("yellow");
$("table tr:nth-child(2) td:nth-child(2)").hide();
$("table tr:nth-child(2) td:nth-child(2)").fadeIn('fast');
myAudio.play();
}
}
$("#button1").click(function(){
isCancelled = false;
noteLoop();
$("#button1").text("MAKING CONTACT");
});
$("#button2").click(function() {
isCancelled = true;
});
</script>
</body>
</html>
关于javascript - 如何在 jquery 完成之前停止函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30284094/