這是因?yàn)槟诿看螁螕魰r(shí)都更改了變量的內(nèi)容dancing。這意味著在單擊 1 時(shí)它將引用 setInterval1，在單擊 2 時(shí)將引用 setInterval2 等。然后當(dāng)您嘗試這樣做時(shí)，clearInterval您實(shí)際上只清除了您創(chuàng)建的最后一個(gè)引用。
您可以通過在添加新間隔之前簡(jiǎn)單地清除舊間隔來避免它：
（我將停止事件更改為右鍵單擊，例如目的）
let button = document.querySelector('.button')
let body = document.querySelector('.body')
let container = document.querySelector('.container')
let disco = document.querySelector('.disco')
let song = document.querySelector('.song')
button.addEventListener('click', ()=> {
let colorOne = parseInt((Math.random() * 255) + 1)
let colorTwo = parseInt((Math.random() * 255) + 1)
let colorThree = parseInt((Math.random() * 255) + 1)
body.style.background = 'rgb(' + colorOne + ', ' + colorTwo + ', ' + colorThree
+ ')'
document.querySelector('.color').innerText = 'rgb (' + colorOne + ', ' + colorTwo + ', ' + colorThree
+ ')'
button.style.border = 'none'
document.querySelector('.scrollto').style.display = 'block'
disco.style.display = 'none'
})
let dance = function() {
let colorOne = parseInt((Math.random() * 255) + 1)
let colorTwo = parseInt((Math.random() * 255) + 1)
let colorThree = parseInt((Math.random() * 255) + 1)
body.style.background = 'rgb(' + colorOne + ', ' + colorTwo + ', ' + colorThree
+ ')'
}
let dancing;
let stopping;
disco.addEventListener('click', ()=> {
document.querySelector('.scrollto').style.display = 'block'
clearInterval(dancing);
clearTimeout(stopping)
dancing = setInterval(dance,300)
stopping = setTimeout(function() {
clearInterval(dancing)
button.style.display = 'block'
body.style.background = 'white'
document.querySelector('.scrollto').style.display = 'none'
}, 15400)
if(song.paused) {
//song.play()
button.style.display = 'none'
}
})
window.addEventListener('contextmenu', ()=> {
body.style.background = 'white'
document.querySelector('.color').innerText = ''
document.querySelector('.scrollto').style.display = 'none'
button.style.border = '1px solid black'
clearInterval(dancing)
clearTimeout(stopping)
song.pause()
song.currentTime = 0
button.style.display = 'block'
disco.style.display = 'block'
})
.button {
font-family: 'Poppins', sans-serif;
border-radius: .5em;
padding: .3em .7em;
font-size: 1.1em;
position: relative;
background: white;
mix-blend-mode: screen;
border: 1px solid black;
}
.color {
font-family: 'Poppins', sans-serif;
color: white;
text-shadow: 1px 1px 3px black;
letter-spacing: 1px;
}
.container {
text-align: center;
position: absolute;
top: 40vh;
left: 50vw;
transform: translate(-50%, -50%);
}
.scrollto {
position: absolute;
bottom: 10px;
left: 50vw;
transform: translateX(-50%);
font-family: 'Poppins', sans-serif;
font-size: .7em;
display: none;
}
.disco {
position: absolute;
bottom: 5px;
right: 10px;
font-family: 'Poppins', sans-serif;
font-size: .8em;
border: .5px solid black;
border-radius: .3em;
padding: 0 .3em;
padding-top: .1em;
}
<body class="body">
<div class="container">
<h3 class="button">Generate Colour</h3>
<p class="color"></p>
</div>
<div class="line">
<p class="scrollto">swipe on screen to reset</p>
</div>
<h3 class="disco">Disco</h3>
<audio class="song" src="song.mp3"></audio>
編輯：
從評(píng)論中，我看到你想保持加速效果：
let button = document.querySelector('.button')
let body = document.querySelector('.body')
let container = document.querySelector('.container')
let disco = document.querySelector('.disco')
let song = document.querySelector('.song')
button.addEventListener('click', ()=> {
let colorOne = parseInt((Math.random() * 255) + 1)
let colorTwo = parseInt((Math.random() * 255) + 1)
let colorThree = parseInt((Math.random() * 255) + 1)
body.style.background = 'rgb(' + colorOne + ', ' + colorTwo + ', ' + colorThree
+ ')'
document.querySelector('.color').innerText = 'rgb (' + colorOne + ', ' + colorTwo + ', ' + colorThree
+ ')'
button.style.border = 'none'
document.querySelector('.scrollto').style.display = 'block'
disco.style.display = 'none'
})
let dance = function() {
let colorOne = parseInt((Math.random() * 255) + 1)
let colorTwo = parseInt((Math.random() * 255) + 1)
let colorThree = parseInt((Math.random() * 255) + 1)
body.style.background = 'rgb(' + colorOne + ', ' + colorTwo + ', ' + colorThree
+ ')'
}
let dancing;
let stopping;
let speed = 300;
const accFactor = 1.5;
disco.addEventListener('click', ()=> {
document.querySelector('.scrollto').style.display = 'block'
if(dancing) {
clearInterval(dancing);
clearTimeout(stopping);
speed = speed/accFactor;
}
dancing = setInterval(dance,speed);
stopping = setTimeout(function() {
clearInterval(dancing)
button.style.display = 'block'
body.style.background = 'white'
document.querySelector('.scrollto').style.display = 'none'
}, 15400)
if(song.paused) {
//song.play()
button.style.display = 'none'
}
})
window.addEventListener('contextmenu', ()=> {
body.style.background = 'white'
document.querySelector('.color').innerText = ''
document.querySelector('.scrollto').style.display = 'none'
button.style.border = '1px solid black'
clearInterval(dancing)
clearTimeout(stopping)
song.pause()
song.currentTime = 0
button.style.display = 'block'
disco.style.display = 'block'
})
.button {
font-family: 'Poppins', sans-serif;
border-radius: .5em;
padding: .3em .7em;
font-size: 1.1em;
position: relative;
background: white;
mix-blend-mode: screen;
border: 1px solid black;
}
.color {
font-family: 'Poppins', sans-serif;
color: white;
text-shadow: 1px 1px 3px black;
letter-spacing: 1px;
}
.container {
text-align: center;
position: absolute;
top: 40vh;
left: 50vw;
transform: translate(-50%, -50%);
}
.scrollto {
position: absolute;
bottom: 10px;
left: 50vw;
transform: translateX(-50%);
font-family: 'Poppins', sans-serif;
font-size: .7em;
display: none;
}
.disco {
position: absolute;
bottom: 5px;
right: 10px;
font-family: 'Poppins', sans-serif;
font-size: .8em;
border: .5px solid black;
border-radius: .3em;
padding: 0 .3em;
padding-top: .1em;
}
<body class="body">
<div class="container">
<h3 class="button">Generate Colour</h3>
<p class="color"></p>
</div>
<div class="line">
<p class="scrollto">swipe on screen to reset</p>
</div>
<h3 class="disco">Disco</h3>
<audio class="song" src="song.mp3"></audio>
