Question

I have a simple countdown using setinterval and I get the error that my functions are not defined. I am using the buttons to start and stop the intervals. Any ideas why this happens?

Javascript

function startCount() {
    $(function() {
        var count = 10;
        countdown = setInterval(function() {
            $("p.countdown").html(count + " seconds remaining!");
            if (count === 0) {
                window.location = 'http://google.com';
            }
            count--;
        }, 1000);
    });
}



function startStop() {
    clearInterval(countdown);
}​

html

<p class="countdown"></p>
<button onclick="startCount()">Start</button>
<button onclick="startStop()">Stop</button>

demo
http://jsfiddle.net/54uQz/1/

Answer 1

Declare your countdown variable outside the startCount() function so that it is visible to both functions. At the moment it only exists in the first, so clearing the timer does nothing.

CODE:

var countdown;

function startCount() {
    var count = 10;
    countdown = setInterval(function() {
        $("p.countdown").html(count + " seconds remaining!");
        if (count === 0) {
            window.location = 'http://google.com';
        }
        count--;
    }, 1000);
}


function startStop() {
    clearInterval(countdown);
}

The Updated Fiddle Example!