javascript - Count down from 10 and repeat it when the timer has reacted 0 - Stack Overflow

admin管理员组

文章数量:1277323

I want to count down from 10 seconds to 0. When it have reached 0 the DIV will reload and the timer will start over again. I have this function that allows it to do exactly like I wanted but the problem is that when the countdown have reached 0 and going back to 10, it will count -1 reload -2 reload -3 reload -4 reload and so on. That is not how I want it! :)

Here's my code:

var time = setInterval(countdown, 1000);
function countdown() {
    var count = 10;
    countdown = setInterval(function() {
        $('#countdown').html(count + ' sekunder kvar');

        if(count == 0) {
            $('#weather-data').load('jquery-fetch/fetch-weatherdata.php?place=' + myplace);
            clearInterval(countdown);
        }

        count--;
    }, 1000);
}

How can I fix my problem so the timer counts down from 10 to 0 and repeat that countdown forever?

Thanks in advance.

EDIT

When this function has reached 0 for the first time and starts over, it counts like this: 10, 9, 8, 10, 7, 6, 5, 4, 3, 2, 1, 10, 9, 8, 7, 10, 6, 5, 4, 3, 2, 1, 10, 9, 8, 10, 7, 6, and so on. Why does it act like this with this code?

function countdown() {
    var count = 10;
    var timerId = setInterval(function() {
        $('#countdown').html(count + ' sekunder kvar');
        count--;

        if(count == 0) {
            $('#weather-data').load('jquery-fetch/fetch-weatherdata.php?place=' + myplace);
            clearInterval(timerId);
            countdown();
        }
    }, 1000);
}

countdown();

Thanks in advance!

I want to count down from 10 seconds to 0. When it have reached 0 the DIV will reload and the timer will start over again. I have this function that allows it to do exactly like I wanted but the problem is that when the countdown have reached 0 and going back to 10, it will count -1 reload -2 reload -3 reload -4 reload and so on. That is not how I want it! :)

Here's my code:

var time = setInterval(countdown, 1000);
function countdown() {
    var count = 10;
    countdown = setInterval(function() {
        $('#countdown').html(count + ' sekunder kvar');

        if(count == 0) {
            $('#weather-data').load('jquery-fetch/fetch-weatherdata.php?place=' + myplace);
            clearInterval(countdown);
        }

        count--;
    }, 1000);
}

How can I fix my problem so the timer counts down from 10 to 0 and repeat that countdown forever?

Thanks in advance.

EDIT

When this function has reached 0 for the first time and starts over, it counts like this: 10, 9, 8, 10, 7, 6, 5, 4, 3, 2, 1, 10, 9, 8, 7, 10, 6, 5, 4, 3, 2, 1, 10, 9, 8, 10, 7, 6, and so on. Why does it act like this with this code?

function countdown() {
    var count = 10;
    var timerId = setInterval(function() {
        $('#countdown').html(count + ' sekunder kvar');
        count--;

        if(count == 0) {
            $('#weather-data').load('jquery-fetch/fetch-weatherdata.php?place=' + myplace);
            clearInterval(timerId);
            countdown();
        }
    }, 1000);
}

countdown();

Thanks in advance!

• javascript
• jquery
• countdown

Share Improve this question Follow edited Apr 17, 2012 at 3:04 Airikr asked Apr 17, 2012 at 2:19 AirikrAirikr 6,4361515 gold badges6464 silver badges112112 bronze badges 8

• can you even have - in a function name? :o – Andreas Wong Commented Apr 17, 2012 at 2:24
• @nifty-dude: nope. that's illegal syntax. it'd be seen as "function count minus down()". – Marc B Commented Apr 17, 2012 at 2:24
• @NiftyDude: I added the - when I was writing down my question here. Didn't tested the function called count-down until after my question. – Airikr Commented Apr 17, 2012 at 2:31
• Why don't you just use an interval of 10 seconds? – RobG Commented Apr 17, 2012 at 2:53
• @RobG: How can I acplish that? As I said before, I'm new to setInterval – Airikr Commented Apr 17, 2012 at 3:05

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 5

I see a lot of problems in your script... So not sure how you even get that to work..

1. Function name can't have -, so that call won't work :S
2. countdown is a global variable inside your function countdown() which is the same as your function name, effectively a countdownception
3. You are effectively creating a new Interval every one second as you are calling countdown

To achieve what you want, try the simpler:

function countdown() {
    // your code goes here
    var count = 10;
    var timerId = setInterval(function() {
        count--;
        console.log(count);

        if(count == 0) {
            // your code goes here
            count = 10;
        }
    }, 1000);
}

countdown();

http://jsfiddle/Xrbm5/13/

Take a look at what your code is doing.

You are setting an interval to run every second. That's fine.

What isn't fine is that, every second, that interval is creating a NEW interval that individually counts down from 10.

Also, you are setting countdown as a global variable. So when your first counter reaches zero, it actually clears the LAST timer, leaving the first one to happily continue into negative numbers, all the while you're spawning new intervals.

Overall, it's a disaster.

If you just want to update the page every 10 seconds, then:

setTimeout(function() {
   // run some code
},10000);

If you want a count down, then reset just the counter at each even number of 10. The following adds start and stop functions, it re-stats from where it left off. Also, if running, clicking start doesn't start another one.

var weatherRefresh = (function() {
  var count = 10;
  var timerRef;
  return {
    start: function() {

      // If already running, leave it running
      if (timerRef) return;

      timerRef = setInterval(function() {
        // Display count
        document.getElementById('dislayedCount').innerHTML = count;

        if (!count--) {
          // count is zero, refresh weather info
          // and start again
          count = 10;
        }
      }, 1000);
    },
    stop: function() {
      timerRef && clearInterval(timerRef);
      timerRef = null;
    }
   };
}());

And some buttons to make it work (or start it when the page loads):

<button onclick="weatherRefresh.start();">Start</button>
<button onclick="weatherRefresh.stop();">Stop</button>

Note that the function will only run at about every second, if the system is busy it will not run on time and will slowly drift, but not by much each time, so it likely doesn't matter.

<script>
var timeone = 10;
setInterval(function () {
if (timeone <= 10 && timeone >= 0) { 
document.getElementById("countdown").innerHTML = "Counting down from " + 
timeone; }
if (timeone == 0) { timeone = 11; }
timeone--;
}, 500);
</script>

<div id="countdown"></div>

本文标签： javascriptCount down from 10 and repeat it when the timer has reacted 0Stack Overflow