jQuery Delay Function

JavaScript
1

Hi,

I am trying to write a script that counts down 15 seconds. I have written some jQuery that counts down 15 to 0 as I would like it to, but I am having problems getting it to pause for 1 second between each number change, currently it goes from 15 to 0 in the blank of an eye.

I assume that the delay() function is the right function to use, but I guess I’m missing something as I can’t seem to get it to work. I have tried two different ways of using it:



 $(document).ready(function() {
	    
	    	function countdown() { 
	    			    	
		    	var time = $('small').text();
		    			    		    		    		
	    		time = time - 1;
	    		
	    		console.log(time);
	    		
	    		$('small').text(time);
	    		
	    		if(time != '0') {
	    		
	    			delay(1000, funtion() {
	    			
	    				countdown();
	    				
	    			});
	    			
	    		}
	    		
	    	}
	    	
	    	countdown();
	    		    	
});

and I have also tried:



 $(document).ready(function() {
	    
	    	function countdown() { 
	    			    	
		    	var time = $('small').text();
		    			    		    		    		
	    		time = time - 1;
	    		
	    		console.log(time);
	    		
	    		$('small').delay('1000').text(time);
	    		
	    		if(time != '0') {
	    		
	    			countdown();
	    			
	    		}
	    		
	    	}
	    	
	    	countdown();
	    		    	
});

Can anyone help me to understand this and what I am doing wrong?

Help will be much appreciated!

Thank you,
Dan.

2

For the purposes of your countdown, I think using the native JS setTimeout function might be your best option:

$(document).ready(function() {

        window.countdown = function countdown() {
		  window.counter = setInterval(function() {
            var time = parseInt($('small').text());
			if(time > 0) {
			   time--;
			   $('small').text(time);
			   console.log(time);
			}
			else {
			   clearInterval(window.counter);
			}
		  }, 1000);
		}
		
		window.pause = function pause() { 
           if(window.isPaused != true) {
		      clearInterval(window.counter);
			  window.isPaused = true;
			}
			else {
			   window.isPaused = false;
			   window.resume();
			}
		}
                    
		window.resume = function resume() { 
           window.countdown();
		}
        
		window.resume();

});

3

Try this:


jQuery.fn.countdown = function(options) {

    options = jQuery.extend({
        from: 10,
        to: 0,
        callback: function(){},
        interval: 1000,
        decimalPlaces: 0,
        step: 1
    }, options);

    var all = this,
        cur = options.from,
        to = options.to,
        step = options.step,
        decimalPlaces = options.decimalPlaces,
        count = function(){
            all.text(decimalPlaces ? cur.toFixed(decimalPlaces) : cur);
            if ((cur -= step) < to) {
                clearInterval(timer);
                options.callback();
            }
        },
        timer = setInterval(count, options.interval);
    
    count();

    return this;

};

Usage:


$('small').countdown({from:15});

[B]Demo: http://jsfiddle.net/LKH2a/1/[/B] (with customised options)

4

Thanks for the explanation’s guys.

This is what I wanted it for: http://inspiredbywordpress.co.uk

Not the best looking site ever, but it does the job.

Thanks for your help!

Dan.

5

The only thing missing would be a reset function, that wold look something like this:
window.reset = function reset(resetVal) {
$(‘small’).text(resetVal);
}

with this, calling the function window.reset(15) for example would reset the counter back to 15

6

There is no real advantage with either as long as you are happy. What I did was give you 3 functions to which you can integrate a pause/play button:

window.countdown actually does the countdown, and window.pause toggles between pause and play. A click event on an input button would fire window.pause, which would check if the counter already is paused, and run the appropriate function.

7

@dgroves, the ‘setInterval’ function is used to run the ‘count’ function once every second (or whatever the interval happens to be).

This is the ‘count’ function:


...
        count = function(){
            all.text(decimalPlaces ? cur.toFixed(decimalPlaces) : cur);
            if ((cur -= step) < to) {
                clearInterval(timer);
                options.callback();
            }
        }
...

It will only stop the interval (with ‘clearInterval’) once the ‘cur’ value (after decrementing) is less than the ‘to’ value (in your case 0, and ‘cur’ would start at 15). There are a few options you can pass but the most basic usage is:


$('small').countdown({from:15});
8

Jimmy -

Great, that works!

But I don’t really understand what is going on. How exactly does this script work?

If you haven’t guessed already I’m kinda new to jQuery!

Thanks,
Dan.

Tommi -

Thanks for your suggestions. What would be the advantage of using your script over that which Jimmy suggested? I think I can just about get my head around what your script is doing…

Thanks,
Dan.