Set variable to false at the end of countdown timer

I might just be being dense here... I have a variable timeDiscount that is true when page loads. Also when page loads, counter begins. At end of counter, I set timeDiscount to false ... except that this doesn't seem to work...

In this jsFiddle, clicking the "CLICK" word will alert you to the current state of timeDiscount , the click returns true even after the counter has stopped. Why is that?

https://jsfiddle.net/df773p9m/4/

function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  refreshIntervalId = setInterval(function () {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.text(minutes + ":" + seconds);

    if (--timer < 0) {
      clearInterval(refreshIntervalId)
      timeDiscount = false;
    }
  }, 1000);
}

jQuery(function ($) {
  var timeDiscount = true
  var fiveMinutes = 5,
    display = $('#time');
  startTimer(fiveMinutes, display);

  $("#discount").click(function() {
    alert(timeDiscount);
  })
});

---

You have a scoping problem.

In your code, timeDiscount is declared inside the unnamed function that's executed on page load ( jQuery(function ($) {... ). The variable is only known by this identifier inside this function, but you're trying to access it from the startTimer function.

Move the declaration outside of the unnamed function:

var timeDiscount = true

function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  refreshIntervalId = setInterval(function () {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.text(minutes + ":" + seconds);

    if (--timer < 0) {
      clearInterval(refreshIntervalId)
      timeDiscount = false;
    }
  }, 1000);
}

jQuery(function ($) {
  var fiveMinutes = 5,
    display = $('#time');
  startTimer(fiveMinutes, display);

  $("#discount").click(function() {
    alert(timeDiscount);
  })
});

---

变量必须是全局的才能在javascript函数中访问它，因此请将其保留在外层

var timeDiscount = true
function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  refreshIntervalId = setInterval(function () {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.text(minutes + ":" + seconds);

    if (--timer < 0) {
      clearInterval(refreshIntervalId)
      timeDiscount = false;
    }
  }, 1000);
}

jQuery(function ($) {
  var fiveMinutes = 5,
    display = $('#time');
  startTimer(fiveMinutes, display);

  $("#discount").click(function() {
    alert(timeDiscount);
  })
});

---

There are two ways to make it happen first is: to move your timeDiscount variable outside the function to make it a global variable like this:

   var timeDiscount = true
   function startTimer(duration, display) {
   var timer = duration, minutes, seconds;
   refreshIntervalId = setInterval(function () {
   minutes = parseInt(timer / 60, 10)
   seconds = parseInt(timer % 60, 10);

   minutes = minutes < 10 ? "0" + minutes : minutes;
   seconds = seconds < 10 ? "0" + seconds : seconds;

   display.text(minutes + ":" + seconds);

   if (--timer < 0) {
     clearInterval(refreshIntervalId)
     timeDiscount = false;
   }
   }, 1000);
}

   jQuery(function ($) {
   var fiveMinutes = 5,
   display = $('#time');
   startTimer(fiveMinutes, display);

   $("#discount").click(function() {
      alert(timeDiscount);
   })
});

Or you could just simply add the window in your timeDiscount inside the function like this and make it window.timeDiscount (refer to this link Define global variable in a JavaScript function):

   function startTimer(duration, display) {
   var timer = duration, minutes, seconds;
   refreshIntervalId = setInterval(function () {
   minutes = parseInt(timer / 60, 10)
   seconds = parseInt(timer % 60, 10);

   minutes = minutes < 10 ? "0" + minutes : minutes;
   seconds = seconds < 10 ? "0" + seconds : seconds;

   display.text(minutes + ":" + seconds);

   if (--timer < 0) {
     clearInterval(refreshIntervalId)
     timeDiscount = false;
   }
   }, 1000);
}

   jQuery(function ($) {

   window.timeDiscount = true
   var fiveMinutes = 5,
   display = $('#time');
   startTimer(fiveMinutes, display);

   $("#discount").click(function() {
      alert(timeDiscount);
   })
});

链接地址: http://www.djcxy.com/p/95038.html

上一篇: 模式窗口关闭操作无法清除Interval

下一篇: 在倒数计时器结束时将变量设置为false