CODEWITHSUNDEEP
javascriptjquery
Barış Velioğlu
Barış Velioğlu

Reputation: 5827

Every 2 seconds make a calculation when the textbox is focused in jquery

The page has a textbox, when the user focus on it, I want to make a calculation every two seconds by the value of it. If the user blurs the textbox, I want to stop this calculation.

Assume only float values can be entered by the user. I tried something but it doesnt work.

http://jsfiddle.net/TUNm4/1/

Added original code, so if the fiddle gets removed we can still see what the issue was:

$(function() {
    var newValue = "";
    var makeCalculation = function(var1) {
        newValue = var1 * 0.05;
    };

    $("#textBox").focus(function() {
        (function() {
            makeCalculation(parseFloat($(this.val())))
            setTimeout(arguments.callee, 2000);
        });
    });
});

Upvotes: 0

Views: 410

Answers (3)

Niels
Niels

Reputation: 49949

Check this fiddle: http://jsfiddle.net/TUNm4/6/

$(function() {

    var newValue = "";
    var makeCalculation = function(_this) {
        newValue = parseFloat($(_this).val()) * 0.05;
        $("div").html(newValue);
    };

    $("#textBox").focus(function(){
        makeCalculation(this);
        var _this = this;
        $(this).data("interval", setInterval(function(){
             makeCalculation(_this);   
        }, 2000));
    })
    .blur(function(){
         clearInterval($(this).data("interval")   );
    });

});

What you can also do, is onkeyup, then you always got the latest calculations and you don't need the timeout:

$(function() {
    var newValue = "";    
    $("#textBox").bind("keyup change mouseup", function() {
        newValue = parseFloat($(this).val()) * 0.05;
        $("div").html(newValue);
    });
});

Upvotes: 1

Last Rose Studios
Last Rose Studios

Reputation: 2481

take a look at this http://jsfiddle.net/lastrose/TUNm4/8/

$(function() {
    var timer;
    var makeCalculation = function(var1) {
        return var1 * 0.05;
    };

    $("#textBox").focus(function() {
        var box = $(this);        
        timer = setInterval(function(){
            box.val(makeCalculation(box.val()));
        }, 2000);
    }).blur(function(){
        clearInterval(timer);
    });

});

What you want to do is use the setInterval so that every x seconds the function repeats itself. and clearInterval to get rid of it.

Upvotes: 1

idanzalz
idanzalz

Reputation: 1760

simple. 

$(function() {
    var timer_id;
    $('#textBox').focus(function() {
        var $this = $(this)
        timer_id = setInterval(function() { calcValue($this.val()) }, 2000)
    }).blur(function() {
        clearInterval(timer_id)
    })
}

BTW, the problem with what you did is that you never called the anonymous function you defined.

BTW (2), You shouldn't use a timer here, instead just react to the jquery events of "keyup", "change" and "mouseup", they should give you all the changes that can happen. Timers are more resource consuming and don't react immediately. like:

$(function() {
    $('#textBox').bind('change keyup mouseup', function() {
        calcValue($(this).val())
    })
}

Upvotes: 1

Related Questions