如果多次单击 setInterval() 按钮，则不会触发 clearInterval()
我正在玩 Color Generator 应用程序，我添加了一个“迪斯科”功能，它会触发随机颜色“闪烁”到歌曲的节奏。顺便说一句，您将听不到它，但它是“为什么拒绝”:)）
一切正常，但是：如果我多次单击“Disco”按钮，setInterval()将会加速（我不介意，事实上我喜欢它），但是一旦我决定通过滚动停止它，它就不会再被清除或在手机上滑动。
我在这里阅读了多个类似的问题，但没有一个有类似的问题，我真的不知道我能做什么。
如果多次单击，我想让它加速，但我也希望能够清除它。
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'
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'
}
})
})
墨色风雨浏览 110回答 1
1回答
-
潇湘沐
这是因为您在每次单击时都更改了变量的内容dancing。这意味着在单击 1 时它将引用 setInterval1，在单击 2 时将引用 setInterval2 等。然后当您尝试这样做时，clearInterval您实际上只清除了您创建的最后一个引用。您可以通过在添加新间隔之前简单地清除旧间隔来避免它：（我将停止事件更改为右键单击，例如目的）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>编辑：从评论中，我看到你想保持加速效果：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>
随时随地看视频慕课网APP
相关分类
JavaScript