堆栈内存溢出
  繁体   English   中英

如果多次单击 setInterval() 按钮，则不会触发 clearInterval()

[英]clearInterval() won't be triggered if setInterval() button is clicked multiple times

 原文  2020-10-27 12:40:36  4   1    javascript/ clearinterval

问题描述

我正在玩一个颜色生成器应用程序，我添加了一个“迪斯科”功能，它将触发随机颜色以“闪烁”到歌曲的节奏中。 顺便说一句，您将无法听到它，但它是“拒绝什么”:)）

一切正常，但是：如果我多次单击“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' } }) 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>

1 个解决方案

解决方案1
 2 已采纳  2020-10-27 12:50:17

这是因为您在每次单击时更改了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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 clearInterval不会停止setInterval clearInterval（）不会清除setInterval和影响导航 使用 clearInterval 清除并使用 setInterval 重置时，setInterval 不会重新启动 setInterval和clearInterval使用相同的按钮 setInterval和clearInterval在按钮内部 setInterval和clearInterval使用相同的按钮？ Javascript - JQuery - clearInterval / setInterval - iframe循环不会在点击时停止 setInterval 和 clearInterval 不起作用 无法使用 clearInterval 停止 setInterval 多次触发的jQuery锚点单击
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM