禁用累积间隔点的多次点击

Question

我正在构建一个具有暂停和恢复功能的计时器。我发现用户可以在多次点击计时器时设置多个间隔。

如何阻止用户设置多个间隔？

一旦设置了间隔，我就尝试插入($('.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

Answer 1

您可以使用标志变量：

let started = false

和条件return声明：

if (started && !pause) {
  return;
} else {
  started = true;
}

所有这一切都是在点击时钟时，它会检查started是否为true。如果是，则计时器已经启用，因此它只是退出功能（除非它已暂停）。如果started的值为false，则计时器开始，并且标志变量设置为true。

请参阅此工作示例：

let currentMins = 10
let currentCount = 10 * 60
let pause = true
let started = false

$(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)
      }
    }

    if (selected.indexOf('Seamless') != -1) {
      window.open('http://seamless.com', '_blank')
    }

  })


  // --- 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() {
    if (started && !pause) {
      return;
    } else {
      started = true;
    }
    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

body {
  margin: 50px;
  font-family: 'Cormorant Garamond', serif;
  color: tomato;
}

main {
  justify-content: center;
}

h1 {
  font-size: 40px;
  text-align: center;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [col1-start] 130px [col2-start] 130px [col3-start] 140px [col3-end];
  grid-template-rows: [row1-start] 120px [row2-start] 120px [row2-end];
  background-color: #fff;
  color: tomato;
  justify-content: center;
}

.box {
  color: tomato;
  padding: 30px;
  font-size: 150%;
  border: 1px solid tomato;
}

.food {
  grid-column: col1-start / col3-start;
  grid-row: row1-start;
}

.clock {
  grid-column: col3-start;
  grid-row: row1-start / row2-end;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock:hover {
  color: #ffd700;
  font-size: 25px;
  cursor: pointer;
}

.settimer {
  grid-column: col1-start;
  grid-row: row2-start;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
}

.settimer div {
  margin: 5px;
}

#mins {
  align-items: center;
  font-size: 20px;
}

.icon {
  font-size: 15px;
}

.icon:hover {
  color: #ffd700;
  cursor: pointer;
  font-size: 18px;
}

.pause {
  grid-column: col2-start;
  grid-row: row2-start;
  font-size: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: stretch;
}

.pause:hover {
  color: #ffd700;
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="pomodoro.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,700" rel="stylesheet">
  <script src="pomodorooo.js"></script>
  <title>Pomodoro Clock</title>
</head>

<body>
  <main>
    <h1>Pomodoro clock</h1>
    <div class="grid">
      <div class="box food">Set the timer for
        <select id="pasta">
  		  <option id="0">I meant, pasta</option> 
		  <option id="1">Pappardelle</option> 	  
		  <option id="2">Penne</option>
		  <option id="3">Farfalle</option>
		  <option id="4">Bucatini</option>
		  <option id="5">Angel Hair</option>
		  <option id="6">Gnocchi</option>
		  <option id="7">Orecchiette</option>
		  <option id="8">Just boiled eggs</option>
		  <option id="9">Take me to Seamless already</option>
		</select>
        <!-- deleted form -->
      </div>
      <!-- a click box that has various food options, default set for each food -->
      <div class="box clock">Start</div>
      <!-- a blank circle. will be filled red-->
      <div class="box settimer">
        <div class="decrement icon"><i class="fas fa-caret-left"></i></div>
        <div id="mins">Ready</div>
        <!-- deleted span -->
        <div class="increment icon"><i class="fas fa-caret-right"></i></div>
      </div>
      <!-- timer set. increment and decrement enabled -->
      <div class="box pause">Pause</div>
      <!-- break set. increment and decrement enabled -->
    </div>
  </main>
  <br /><br /><br /><br /><br /><br />
</body>

</html>