Question

我有一个程序，当你点击一个按钮时，一系列5个灯光和声音在循环中播放（基本上，表格中的某些单元格颜色按顺序改变）。我有另一个按钮＆＃34;取消＆＃34;取消它。但是，当您单击取消时，它仍然会完成当前循环。理想情况下，我希望它停止中间循环，并将所有内容重置为开始时（或结束时）。

这是我的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");
};

}）;

我也意识到我可能完全以错误的方式解决了这个问题，而我想做的事情甚至可能无法实现。我也希望它每次循环都能越来越快，但我无法找到任何方法来实现这一目标：（

感谢您的帮助。

Answer 1

根据您的代码摘录，您可以添加名为＆＃34; timeupdate＆＃34;的事件监听器。到一个音频元素并在其处理程序内检查所请求的任何取消，如果是这样再次重新启动循环..下面是一段摘录代码＆＃34;我没有测试:(但它只是简化了你的想法＆＃34;

<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>

如何在jquery完成之前停止一个函数？

1 个答案: