CODEWITHSUNDEEP
javascript
kalyan
kalyan

Reputation: 171

setTimeout() not working

I want to count up the number of below textbox each 1 second. I tried it like below.but this not work...I don't know where I did mistake. and also i want to stop that count after the text box value reach 10. Please give me the solution any one...thanks

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
var fun = function()
{

var count = $("#target :text").val();

$("#target :text").val(count++);

setTimeout(fun, 1000);

}

fun();
</script>

<div id="target">
<input type="text" value="0">
</div>

Upvotes: 1

Views: 351

Answers (8)

nhaa123
nhaa123

Reputation: 9798

You can do it like this, actually counting seconds instead of counter:

var t = new Date(), a = setInterval(function() {
    $("#target>").filter(':input').val(function() {
        if ((c = (Date.now() - t.getTime()) / 1000) >= 10)
            clearInterval(a);

        return Math.round(c);
    });
}, 1000);

Demo here.

EDIT:

Just because I love Coffeescript:

t = new Date()

a = setInterval ->
    $('#target>').filter(':input').val ->
        clearInterval a if (c = (Date.now() - t.getTime()) / 1000) >= 10

        Math.round c
, 1000

Upvotes: 1

AKD
AKD

Reputation: 3966

demo: http://jsfiddle.net/39qVC/

var fun = function ()
    {
        var count = $("#target :text").val();
        if(count >= 10) {
            clearTimeout(loop);
        }
        else
        {
            $("#target :text").val(parseInt(count, 10) + 1);
        }
    }

    var loop;
    $(document).ready(function(){
        var count = $("#target :text").val();
        loop = setInterval(fun , 1000);
    });

Upvotes: 0

andy magoon
andy magoon

Reputation: 2929

None of these answers take into account that a setTimeout or setInterval isn't a realtime operation. Your time will be off. Do not use a counter.

Use a Date object to calculate elapsed time, show the # of seconds elapsed, and then you can use a setInterval to update the view.

Upvotes: 0

Satpal
Satpal

Reputation: 133403

Use ++count instead of count++, Problem with you code is that you are using post increment.

$("#target :text").val(++count);

DEMO

Additionally, I would recommend you to use document-ready handler.

EDIT

Example with Pre increment

var count  = 0; //Suppose
$("#target :text").val(++count);

equivalent to 

var count  = 0; 
count = count + 1;
$("#target :text").val(count); //Will set value as 1

Example with POST increment

var count  = 0; //Suppose
$("#target :text").val(count++);

equivalent to 

var count  = 0; 
$("#target :text").val(count); //Will set value as 0
count = count + 1;

Upvotes: 5

Dhaval Javiya
Dhaval Javiya

Reputation: 154

Try below code its work..

 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script>
 function fun()
 {
   var count = $("#target :text").val();
   count= parseInt(count) +1;// We have to parse value in to the int or other datatype.
   $("#target :text").val(count);
 }
   setInterval('fun()', 100);
</script>
<div id="target">
<input type="text" value="0">
</div>

We need to parse the count value because it is in the string format.

Upvotes: -1

KooiInc
KooiInc

Reputation: 122888

Keep it simple:

function fun (){
 $("#target :input").val(function(){return +this.value + 1;});
 setTimeout(fun, 1000);
}

Upvotes: 1

Tim
Tim

Reputation: 2440

Most of the answers are plain wrong and confusing and don't get what's really wrong with this. Your way of setting up the interval loop is completely correct.

What you missed is that count++ will return count and then increase it. So you always set the count to 0. You first need to increase count and then set it. You could use ++count as Satpal proposed.

I think it's cleaner to create a temporary variable for it like var updatedTime = count + 1; and then set it to updatedTime. That way it's much clearer and way more difficult to be bitten by a bug such as yours. Functionality wise, both approaches are the same though.

Upvotes: 1

wong2
wong2

Reputation: 35710

The problem is that, val() gives you a string.

var fun = function() {
    var el = $("#target :text");
    var count = parseInt(el.val(), 10);
    el.val(count+1);
    setTimeout(fun, 1000); 
}

fun();

Upvotes: 1

Related Questions