javascript - 如果多次单击 setInterval() 按钮,则不会触发 clearInterval()
问题描述
我正在玩一个颜色生成器应用程序,并添加了一个“迪斯科”功能,该功能将触发随机颜色“闪烁”到歌曲的节奏中。顺便说一句,您将听不到它,但它是“拒绝什么”:))
一切正常,但是:如果我多次单击“迪斯科”按钮,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'
}
})
window.addEventListener('touchmove', ()=> {
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>
解决方案
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>
推荐阅读
- python - 如何在熊猫数据框中将 yyyymmdd 格式更改为 mm-dd-yyyy?
- powershell - 使用 PowerShell 远程运行进程返回 The request is not supported
- java - 将对象集合中的一个属性添加到另一个集合
- javascript - 如何使用 Typescript、React 和 Webpack 导入 SCSS 或 CSS 模块
- php - 如何在 PhpSpreadsheet 中获取第一列索引
- mongodb - 首选 MongoDb 架构设计
- web-crawler - OWASP ZAP Ajax Spider URL 参数问题
- nightwatch.js - 从 0.9.19 升级到 1.1.0 似乎会破坏 Page 对象
- bash - Sed 不替换文本文件中的新行模式
- c# - C# 以描述性方式检查 null