时间戳

首页 > 解决方案 > 如何从另一个函数中停止一个函数

javascript - 如何从另一个函数中停止一个函数

问题描述

在下面的代码中，当用户单击按钮 reset 时，我试图停止功能 color-blast 。我有一个用于休息按钮的偶数侦听器功能，但有人可以帮我在事件侦听器内的函数中添加一些代码，用于停止颜色爆炸功能的重置按钮。

var p1Button = document.querySelector("#p1");
var p2Button = document.getElementById("p2");
var resetButton = document.getElementById("reset");
var p1Display = document.getElementById("p1Display");
var p2Display = document.getElementById("p2Display");
var numInput = document.querySelector("input");
var winningScoreDisplay = document.getElementById("winningValue");
var p1Score = 0;
var p2Score = 0;
var gameOver = false;
var winningScore = 5;

p1Button.addEventListener("click", function(){
 if (!gameOver) {
    p1Score++;
    if(p1Score === winningScore) {
        p1Display.classList.add("winner");
        gameOver = true;
        colorBlast();
       }
    p1Display.textContent = p1Score;
    }
})


p2Button.addEventListener("click", function() {
    if (!gameOver) {
    p2Score++;
    p2Display.textContent = p2Score;  
    if (p2Score === winningScore) {
        p2Display.classList.add("winner");
        gameOver = true;
        colorBlast();  
    }
}
})

resetButton.addEventListener("click", function(){
   reset();
})

numInput.addEventListener("change", function() {
  winningScoreDisplay.textContent = this.value;
  winningScore = Number(numInput.value);
  reset();
});

function reset() {
    p1Score = 0;
    p2Score = 0;
    p1Display.textContent = p1Score;
    p2Display.textContent = p2Score;
    p1Display.classList.remove("winner");
    p2Display.classList.remove("winner");
    gameOver = false;
   
}

function colorBlast() { 


    var colors = ['black', 'green', 'orange', 'pink', 'yellow', 'red'];
  
    var colorIndex = 0;
    
   {
    setInterval(function(){
     
      document.body.style.backgroundColor = colors[colorIndex++];
  

      colorIndex %= colors.length;
      }, 1000)}
  };
.winner {
    color: green;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Food counter</title>
        <link rel="stylesheet" href="foodCounter.css">
    </head>
    <body id="start">
        <h1>
            <span id="p1Display">0</span>
               to
            <span id="p2Display">0</span>
        </h1>
        
        <p>Eating to <span id= "winningValue">5</span></p>

        <input type="number">
        <button id="p1">Player 1</button>
        <button id="p2">Player 2</button>
        <button id="reset">reset</button>
    <script type="text/javascript" src="foodCounter.js"></script>
    </body>
</html>

标签： javascript

解决方案

你应该clearInterval在reset函数中使用

var p1Button = document.querySelector("#p1");
var p2Button = document.getElementById("p2");
var resetButton = document.getElementById("reset");
var p1Display = document.getElementById("p1Display");
var p2Display = document.getElementById("p2Display");
var numInput = document.querySelector("input");
var winningScoreDisplay = document.getElementById("winningValue");
var p1Score = 0;
var p2Score = 0;
var gameOver = false;
var winningScore = 5;
var colorBlastInterval;

p1Button.addEventListener("click", function(){
 if (!gameOver) {
    p1Score++;
    if(p1Score === winningScore) {
        p1Display.classList.add("winner");
        gameOver = true;
        colorBlast();
       }
    p1Display.textContent = p1Score;
    }
})


p2Button.addEventListener("click", function() {
    if (!gameOver) {
    p2Score++;
    p2Display.textContent = p2Score;  
    if (p2Score === winningScore) {
        p2Display.classList.add("winner");
        gameOver = true;
        colorBlast();  
    }
}
})

resetButton.addEventListener("click", function(){
   reset();
})

numInput.addEventListener("change", function() {
  winningScoreDisplay.textContent = this.value;
  winningScore = Number(numInput.value);
  reset();
});

function reset() {
    p1Score = 0;
    p2Score = 0;
    p1Display.textContent = p1Score;
    p2Display.textContent = p2Score;
    p1Display.classList.remove("winner");
    p2Display.classList.remove("winner");
    gameOver = false;
document.body.style.backgroundColor = 'white';
   clearInterval(colorBlastInterval);
}

function colorBlast() { 


    var colors = ['black', 'green', 'orange', 'pink', 'yellow', 'red'];
  
    var colorIndex = 0;
    
   {
    colorBlastInterval = setInterval(function(){
     
      document.body.style.backgroundColor = colors[colorIndex++];
  

      colorIndex %= colors.length;
      }, 1000)}
  };
.winner {
    color: green;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Food counter</title>
        <link rel="stylesheet" href="foodCounter.css">
    </head>
    <body id="start">
        <h1>
            <span id="p1Display">0</span>
               to
            <span id="p2Display">0</span>
        </h1>
        
        <p>Eating to <span id= "winningValue">5</span></p>

        <input type="number">
        <button id="p1">Player 1</button>
        <button id="p2">Player 2</button>
        <button id="reset">reset</button>
    <script type="text/javascript" src="foodCounter.js"></script>
    </body>
</html>

推荐阅读