Question

i’m not pro with jquery, but i just made a simple code to show a div, after click another div with 10 sec timer.

This is my code:

$(document).ready(function() {
    $('.link').click(function() {
    $('#my-timer').fadeIn('slow');
        var settimmer = 0;
        $(function(){
                setInterval(function() {
                    var timeCounter = $("b[id=show-time]").html();
                    var updateTime = eval(timeCounter)- eval(1);
                    $("b[id=show-time]").html(updateTime);

                    if(updateTime == 0){
                    $('#my-timer').hide(); 
                      $('.download').fadeIn('slow'); 
                    }
                }, 1000);           
});
});
        $(".download").hide();
        $("#my-timer").hide();
});

HTML:

<div class="link">Link</div>
<div class="download">Download</div>
<div style="display:none" id="my-timer">Page Will Redirect with in <b id="show-time">10</b> seconds<br />
</div>

Demo: http://jsfiddle.net/vuJZX/

my problems is:

1: When for first time click on link, everything is ok, but i need to show this timer just for once time! in demo u can see, after every 10 sec, if u click on Link, timer will be start and counting like this, -1, -2, -3, -4 … how i can stop and disable this timer after 10 sec? i need to disable timer after 10 sec.

2: i need to show this timer for 10 sec, but if u clicking on Link word 3-4 times, timer will be working to fast! i think my problem is timer speed! i dont know how i can explain this problem, but u can try in demo link, just click on Link 4-5 times and look at timer!

and my last question, i don’t know my code is standard or not. do i need to change code or is correct?

thanks

Answer 1

I think the easiest way to handle it would just be to use one. Since you only want this event to fire once, one will unbind the handler after the first click.

$('.link').one("click", function() {

You will also need to use clearInterval to stop the interval once you are done with it.

On a related note, don’t use eval. You should be using parseInt in this case, or maintain the number in a javascript variable.

http://jsfiddle.net/vuJZX/3

$('.link').one("click", function() {
    $('#my-timer').fadeIn('slow');
    var settimmer = 0;
    var counter = 10;
    var interval = -1;
    $(function() {
        interval = setInterval(function() {
            var timeCounter = $("b[id=show-time]").html();
            $("b[id=show-time]").html(counter--);

            if (counter == 0) {
                $('#my-timer').hide();
                $('.download').fadeIn('slow');
                clearInterval(interval);
            }
        }, 1000);
    });
});