CODEWITHSUNDEEP
jquery
user892134
user892134

Reputation: 3224

mousedown not working

With the below code, when i click and hold the bid-up button, it only goes through the code once and i have to click again for it to work. What it should do is it repeat the code until mouseup or mouseleave. What did i do wrong?

$('.bid-up').live('mousedown',function() {

    var button = $(this);
    timeoutId = setTimeout(function(){

        var number = button.parent('div').siblings('#bid-child-container-2').find('#bid-price').val();
        var newnumber = number.split('.');
        var on = button.attr('data-on');

        button.siblings('#bid-down').attr('data-on','1');

        if(newnumber[1]<9) {
            var first = newnumber[0];
            var second = parseInt(newnumber[1])+1;
        }

        if(newnumber[1]==9) {
            var first = parseInt(newnumber[0])+1;
            var second = 0;
        }

        var finalnumber = first+'.'+second;
        button.parent('div').siblings('#bid-child-container-2').find('#bid-price').val(finalnumber);

    }, 20);

}).bind('mouseup mouseleave', function() {
    clearTimeout(timeoutId);
});

Upvotes: 1

Views: 1969

Answers (2)

19greg96
19greg96

Reputation: 2591

Solution: use setInterval and clearInterval instead of timeout, because setTimeout only executes the closure function once, or setTimeout in your closure function.

Example for using setTimeout in the function itself:

$('.bid-up').live('mousedown',function() {

    var button = $(this);


    function asd(){

        var number = button.parent('div').siblings('#bid-child-container-2').find('#bid-price').val();
        var newnumber = number.split('.');
        var on = button.attr('data-on');

        button.siblings('#bid-down').attr('data-on','1');

        if(newnumber[1]<9) {
        var first = newnumber[0];
        var second = parseInt(newnumber[1])+1;
        }

        if(newnumber[1]==9) {
        var first = parseInt(newnumber[0])+1;
        var second = 0;
        }

        var finalnumber = first+'.'+second;
        button.parent('div').siblings('#bid-child-container-2').find('#bid-price').val(finalnumber);

        timeoutId = setTimeout(asd, 20);
    }

    timeoutId = setTimeout(asd, 20);

}).bind('mouseup mouseleave', function() {
    clearTimeout(timeoutId);
});

example using setInterval and data to store interval id.

$('.bid-up').live('mousedown',function() {

    var button = $(this);

    button.data('interval', setInterval(function (){

        var number = button.parent('div').siblings('#bid-child-container-2').find('#bid-price').val();
        var newnumber = number.split('.');
        var on = button.attr('data-on');

        button.siblings('#bid-down').attr('data-on','1');

        if(newnumber[1]<9) {
        var first = newnumber[0];
        var second = parseInt(newnumber[1])+1;
        }

        if(newnumber[1]==9) {
        var first = parseInt(newnumber[0])+1;
        var second = 0;
        }

        var finalnumber = first+'.'+second;
        button.parent('div').siblings('#bid-child-container-2').find('#bid-price').val(finalnumber);
    }, 20));

}).bind('mouseup mouseleave', function() {
    clearInterval(button.data('interval'));
});

Upvotes: 2

tzerb
tzerb

Reputation: 1433

Try this: http://jsfiddle.net/R85Xb/

var timeoutId;
function x()
{
        $("#bids").append("x");
        timeoutId = setTimeout(x, 200);
}

$('.bid-up').live('mousedown', function() {

    var button = $(this);
    timeoutId = setTimeout(x, 200);

}).bind('mouseup mouseleave', function() {
    //alert('clear');
    clearTimeout(timeoutId);
});​


<div class="bid-up">here</div>
<div id="bids"></div>​

Upvotes: 1

Related Questions