如何在jquery中停止一个函数

How to stop a function before it finishes in jquery?

本文关键字：一个 函数 jquery      更新时间：2023-09-26

我有一个程序，当你点击一个按钮，一系列的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>
相关文章：