How to make the counter stop and restart after 30 seconds

[devvvvv]

Hi
How can I change the code that when the counter get to 30 seconds he will stop and start the count again..?
This is the script:
(function($){
    
    // Number of seconds in every time division
    var days    = 24*60*60,
        hours    = 60*60,
        minutes    = 60;
    
    // Creating the plugin
    $.fn.countup = function(prop){
        
        var options = $.extend({
            callback    : function(){},
            start        : new Date()
        },prop);
        
        var passed = 0, d, h, m, s,
            positions;

        // Initialize the plugin
        init(this, options);
        
        positions = this.find('.position');
        
        (function tick(){
            
            passed = Math.floor((new Date() - options.start) / 1000);
            
            // Number of days passed
            d = Math.floor(passed / days);
            updateDuo(0, 1, d);
            passed -= d*days;
            
            // Number of hours left
            h = Math.floor(passed / hours);
            updateDuo(2, 3, h);
            passed -= h*hours;
            
            // Number of minutes left
            m = Math.floor(passed / minutes);
            updateDuo(4, 5, m);
            passed -= m*minutes;
            
            // Number of seconds left
            s = passed;
            updateDuo(6, 7, s);
            
            // Calling an optional user supplied callback
            options.callback(d, h, m, s);
            
            // Scheduling another call of this function in 1s
            setTimeout(tick, 1000);
        })();
        
        // This function updates two digit positions at once
        function updateDuo(minor,major,value){
            switchDigit(positions.eq(minor),Math.floor(value/10)%10);
            switchDigit(positions.eq(major),value%10);
        }
        
        return this;
    };

    function init(elem, options){
        elem.addClass('countdownHolder');

        // Creating the markup inside the container
        $.each(['Days','Hours','Minutes','Seconds'],function(i){
            $('<span class="count'+this+'">').html(
                '<span class="position">\
                    <span class="digit static">0</span>\
                </span>\
                <span class="position">\
                    <span class="digit static">0</span>\
                </span>'
            ).appendTo(elem);
            
            if(this!="Seconds"){
                elem.append('<span class="countDiv countDiv'+i+'"></span>');
            }
        });

    }

    // Creates an animated transition between the two numbers
    function switchDigit(position,number){
        
        var digit = position.find('.digit')
        
        if(digit.is(':animated')){
            return false;
        }
        
        if(position.data('digit') == number){
            // We are already showing this number
            return false;
        }
        
        position.data('digit', number);
        
        var replacement = $('<span>',{
            'class':'digit',
            css:{
                top:'-2.1em',
                opacity:0
            },
            html:number
        });
        
        // The .static class is added when the animation
        // completes. This makes it run smoother.
        
        digit
            .before(replacement)
            .removeClass('static')
            .animate({top:'2.5em',opacity:0},'fast',function(){
                digit.remove();
            })

        replacement
            .delay(100)
            .animate({top:0,opacity:1},'fast',function(){
                replacement.addClass('static');
            });
    }
})(jQuery);

 

[fire7side]

Well, you just start with function, but it doesn't have a name.  If you look down where it talks about seconds that's where you are interested:

            // Number of seconds left
            s = passed;
            updateDuo(6, 7, s);
            
            // Calling an optional user supplied callback
            options.callback(d, h, m, s);
            
            // Scheduling another call of this function in 1s
            setTimeout(tick, 1000);

If s is larger than thirty, then you want to start the function over again, I think.

if(s>30)nameOfThisFunction();

that would go right after 

s = passed;

 

[mattstyles]

I think in this case the easiest solution is to actually fudge your timing, if you're using JS your timing isn't needing to be critical and as its in the page it wont be a long running process so the error will be minimal.

Try passing the current 'count' back into the function, resetting it when it hits  a certain threshold (in this case 30s, or 30000ms).

var THRESHOLD = 30000
var TICK_SPEED = 1000

function tick( count ) {
  if ( count >= THRESHOLD ) {
    setTimeout( function() {
      count( 0 )
    }, TICK_SPEED )
    return
  }

  setTimeout( function() {
    count( count + TICK_SPEED )
  }, TICK_SPEED )
}

Something like this resets the counter roughly every 30s.

This also saves expensive stuff like flooring and Date operations, although at a few ops per second performance won't be an issue anyway.