如何在if语句中调用函数-javascript

Question

我已经设置了一个间隔设置，当有人按下名为“重置”的按钮时，我希望清除/结束该间隔设置，这样开始间隔的功能是新鲜的并准备接受新值。

如何才能做到这一点？

这是我的代码：

<div class="grid">
  <div id="circle" class="center">
    <div id="timer" class="fl"></div>
      <div class="grid">
        <div class="col-1-2 center">
          <div class="circleSelect">
            <select id="min" class="fm">  
              <option value="0">0 minutes</option>
              <option value="300">5 minutes</option>
              <option value="600">10 minutes</option>
              <option value="900">15 minutes</option>
              <option value="1200">20 minutes</option>
              <option value="1500">25 minutes</option>
            </select>
          </div>
        </div>
      </div>
    </div>
</div>
<div class="grid">
  <div class="col-1-3 center centerText prZ ptm">

    <div id="begin">
    <a class="btn fm" onClick="begin()">Begin Meditation</a>
    </div>

    <div id="during" class="opacity">
    <a class="btn fm black" onClick="stop()">Pause</a>
    <a class="btn fm red" onClick="resetTime()">Reset</a>
    <a class="btn fm red" onClick="finish()">Finish Test</a>
    </div>

    <div id="finish" class="centerText ptm grid opacity">
      <div id="quote" class="pbm col-1-2 center">
          <p class="centerText fm">"Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment."
           <p class="fm">- Buddha</p>
          </p>
        </div>
        <a id="again" class="btn fm" onClick="again()">Meditate Again</a>

    </div>

  </div>

  <audio id="soundName" style="display: none;"></audio>
</div>
<script>

  function begin() {

    var min = parseInt($('#min').val(), 10);
    var sec = 1;
    var time = min + sec; 

    setInterval( function() {
      if (time > 0){
        --time;
      }
      else if(time == 0){
        time = -1;
        finish();
      }
    }, 1000);

    function convertTime() {
        var mins = Math.floor((min % 3600) / 60);
        var secs = (sec % 60);
        // return humanTime;

        if (mins >= 0){
        var timeTravel = setInterval( function() {
          --secs;

        if (secs == -1 && min > 0){secs = 59; --mins;}  // changes the minute 
        else if (secs == 0 && min == 0) {clearInterval(timeTravel);} // stops at 00:00


        var humanTime = (((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs);
        $('#timer').html(humanTime).fadeIn(200);
        }, 1000); 
      } else {}

    }

    convertTime();

    $('#begin').fadeToggle(200);
    $('.selectStyle').fadeToggle(200);
    $('.circleSelect').fadeToggle(200);
    $('#during').delay(200).fadeToggle(400);

  }

  function stop() {

  }


  function resetTime(interval) {
    $('#during').fadeToggle(200);
    $('#begin').delay(200).fadeToggle(400);
    $('.selectStyle').fadeToggle(200);

    var interval = clearInterval(timeTravel);

    resetTime();
  }


  function finish() {


    $('#during').fadeOut(200);
    $('#circle').fadeOut(500);

    $('#finish').insertAfter('#circle').delay(1000).fadeToggle(400);
  }

  function again() {
    $('#finish').fadeOut(200);
    $('#begin').delay(200).fadeToggle(200);
    $('#circle').delay(200).fadeToggle(400);
    $('.selectStyle').fadeToggle(200);

  }


</script>

Answer 1

问题在于timeTravel对于convertTime是本地的，因此timeTravel内部的resetTime引用了一个不同的变量（在这种情况下为未定义）。

将其声明移到该函数之外，以便两个函数都可以访问它，并在这些函数中删除该变量的var ：

<script>
var timeTravel;

function convertTime() {
    // ...
    timeTravel = setInterval( /* ... */ );
    // ...
}

function resetTime() {
    // ...
    clearInterval(timeTravel);
    // ...
}
</script>

Answer 2

您已经在convertTime函数内部将timeTravel变量声明为局部变量，这意味着在退出函数时该变量将消失。

在begin函数之外声明该变量，然后将赋值保留在convertTime函数中。 这样，您可以使用resetTime函数内部的变量来停止间隔。

Answer 3

timeTravel()应该在全局范围内。

function convertTime() {
        if (/* code */){
            window.timeTravel = setInterval( function(/* code */) {
        }
}

要么

var timeTravel = '';
function convertTime() {
        if (/* code */){
            timeTravel = setInterval( function(/* code */) {
        }
}