【发布时间】：2018-02-07 03:25:14
【问题描述】：
我正在构建一个具有暂停和恢复功能的计时器。我发现当定时器被多次点击时，用户可以设置多个间隔。
如何防止用户设置多个间隔？
我尝试在设置间隔后插入($('.clock)).off("click")，但不知道如何恢复它。我以为我可以做一个声明pause = true，但不确定如何在我的代码中使用它。
let currentMins = 10
let currentCount = 10*60
let pause = true
$(document).ready(function(){
// --- SET TIME --- //
$('select').on('change', function(){
const timePair = {
pappardelle : 7,
penne : 10,
farfalle : 11,
bucatini : 8,
angelhair : 4,
gnocchi : 1,
orecchiette : 10,
justboiledeggs : 11
}
const selected = this.value
for(let keys in timePair){
let toPrint = ''
if(selected.split(' ').join('').toLowerCase() == keys){
toPrint = timePair[keys]
$('#mins').html(toPrint)
$('.clock').html(toPrint+':00')
currentMins = toPrint
currentCount = timePair[keys]*60
console.log('current counts on set: ',currentCount)
}
}
})
// --- UPDATE CLOCK --- //
//basic increment and decrement setting
$('.decrement').click(function(){
if((currentMins)>1){
currentMins-=1
currentCount-=60
$('#mins').html(currentMins)
$('.clock').html(currentMins + ':00')
console.log("current mins and count in decrement :", currentMins, currentCount)
}
})
$('.increment').click(function(){
if(currentMins<100){
currentMins+=1
currentCount += 60
$('#mins').html(currentMins)
$('.clock').html(currentMins + ':00')
console.log("current mins and count in increment :", currentMins, currentCount)
}
})
$('.clock').click(function(){
console.log("current currentCount in the starting clock div :", currentCount)
//interval setting
const interval = window.setInterval(function(){
if(currentCount == 0){
pause=true
$('.clock').html('Buon appetito!')
} else {
console.log("current currentCount in the else clause in clock div :", currentCount)
pause = false
currentCount --
let minuites = Math.floor(currentCount / 60)
let seconds = currentCount - minuites * 60
$('.clock').html(minuites + ':' + ('0' + seconds).slice(-2))
}
$('.pause').click(function(){
pause = true;
clearInterval(interval)
})
}, 1000)
$('select').on('change', function(){
pause = true;
clearInterval(interval)
})
})
})//end jquery
【问题讨论】：
-
不，不要在其他点击处理程序中使用点击分配；在 setInterval 内单击也不好:)...尝试将您的逻辑分解为单独的任务/功能-
-
你能提供一个minimal reproducible example（带有基本的HTML、CSS）以便我们玩吗？
-
感谢@RokoC.Buljan！我刚刚更新了它，只是复制并粘贴了每一行代码，它太长了，但如果你能看看它会很棒。
-
@RokoC.Buljan 你能告诉我为什么不希望将 click 放在 setinterval 内吗？
-
您每秒钟分配一个点击处理程序。你为什么想这么做？ :) 在 setinterval 之外分配一次。巴姆。任务完成。您的 JS 代码中有许多奇怪/重复的部分 - 太多了，无法在此评论中一一进行，但我相信您会随着时间的推移取得进步！编码愉快！
标签： javascript jquery setinterval