Set variable to false at the end of countdown timer

Question

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);
  })
});

I think you linked the wrong fiddle... or an earlier version at least — Jacob Petersen, Sep 07 '15 at 06:11

score 4 · Accepted Answer · answered Sep 07 '15 at 06:11

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);
  })
});

score 1 · Answer 2 · answered Sep 07 '15 at 06:12

1

variable must be global to access it in javascript function so keep it at outer level

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);
  })
});

answered Sep 07 '15 at 06:12

Bhushan Kawadkar

28,279
5
35
57

Does that add anything not already in my answer? Also, your explanation is very inaccurate. variable don't need to be global, they need to be in accessible scope. – Amit Sep 07 '15 at 06:12
There is a little time difference between our post. You are faster than me thats the only difference. Global means accessible to all script code so that if change made at one place should be available to other places also. – Bhushan Kawadkar Sep 07 '15 at 06:14
OK... I agree you didn't answer "an hour later", but when I see my answer doesn't add anything new, I regularly remove it (up to you to choose though). – Amit Sep 07 '15 at 06:15
I don't think there is anything wrong ... two people can think the same thing at a time ... it does't mean that one should remove it .. as I find there is no harm at all – Bhushan Kawadkar Sep 07 '15 at 06:18
No problem, as I said, it's up to you (But I still think your explanation is missleading) – Amit Sep 07 '15 at 06:19

score 1 · Answer 3 · edited May 23 '17 at 11:51

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);
   })
});

score 0 · Answer 4 · answered Sep 07 '15 at 06:21

You need to declare the timeDiscount variable in global scope, i.e., before startTimer function, so that when you refer to the same in startTimer(), it would be available to it,else it would create a global variable and set it to false.

The variable(timeDiscount) created in global scope is entirely different from the one present inside your $(function() { var timeDiscount=true; }) which is local to that scope, thats why you never got any error nor did you get what you expected.

JS Code:

var timeDiscount = true;

function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  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) {
         timer = duration;
         timeDiscount = false;
     }
   }, 1000);
}

Live Demo @ JSfiddle

Set variable to false at the end of countdown timer

4 Answers4