javascript - one button three functionsn

Question

First i want to say that i am a newbie in the javascript world.

I want to write a function for a button:

when button is pushed -> x=0 ; post(x); display x;
when button is released -> x=1; post(x); display x;
when button is hold down -> while hold: 
            if(x=0){post(x); display x; x++}          
            if(x=1){post(x); display x; x--}

This is what i have come up with so far:

http://pastebin.com/1myT891h

Help would be appreciated very much.

What's post? And what do you mean by "while hold", an infinite loop? — Bergi
– Bergi, Commented Nov 29, 2012 at 15:09

Anders · Accepted Answer · 2012-11-29 16:08:11Z

2

Try this fiddle:

Html:

<button id="button">Click here</button><br/>
Status: <span id="status"></span>

Javascript:

observeTriState("#button", function(state) {
    var states = { '0':'Push', '1':'Release', '2':'Hold Down' };

    $("#status").text(states[state]);
}, 500);

function observeTriState(selector, callback, holdDelay) {
    var mouseDown = false;
    var mouseIn = false;
    var interval;

    function checkStatus() {
        if (mouseDown && mouseIn) {
            callback(2)
        }
    }

    $(selector).mousedown(function() {
        callback(0);
        mouseDown = true; 
        interval = setInterval(checkStatus, holdDelay); 
    }).mouseup(function() {
        mouseDown = false;
        callback(1);
        clearInterval(interval);
    }).mouseenter(function() {
        mouseIn = true;
    }).mouseleave(function() {
        mouseIn = false;
        mouseDown = false;
        clearInterval(interval);
        callback(1);
    });
}

edited Nov 29, 2012 at 16:08

answered Nov 29, 2012 at 15:42

Anders

15.4k5 gold badges34 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bergi Over a year ago

Why setTimeout and setInterval?

Anders Over a year ago

It adds an initial pause before firing "hold down". You could just use the initial timeout on setInterval(), but this allows for a little more flexibility. Are you sensing a code smell?

Bergi Over a year ago

Yes, I have a good nose for those :-) The timeout might start the interval and set mouseDown=true long after it is released. Click the button once, and then hover it after one second or so.

Anders Over a year ago

Ahhh :) Good catch! So would you recommend moving the mouseDown = true; out of the setTimeout and into the parent method, or moving to just the setInterval?

Jason L. · Accepted Answer · 2012-11-29 15:29:17Z

Check the following jsFiddle. It does what you're looking for (at least, I hope it does). Let me know if it's not clear and I'll see if I can clear it up a bit.

http://jsfiddle.net/s9nUr/

Here's the code from the fiddle, if you're not interested in seeing it in action. Please note the use of jQuery.

var x= 0;
var interval;

var push = function(val) {

}

var hold = function() {
    if ( x === 0 ) {
        console.log('x is 0');    
    }
    if ( x === 1 ) {
        console.log('x is 1');        
    }
}

$('#myButton').on('mousedown', function() {
    x= 0;
    push(x); 

    interval = setInterval(hold, 500);
});

$('#myButton').on('mouseup', function() {
    x = 1;        
    push(x); 

    clearInterval(interval);
});

luchosrock · Accepted Answer · 2012-11-29 15:12:45Z

0

maybe creating one function with 2 arguments: value and action. so when button is pushed -> myfunction(x,"pushed") ... and so on.

answered Nov 29, 2012 at 15:12

luchosrock

70610 silver badges24 bronze badges

Collectives™ on Stack Overflow

javascript - one button three functionsn

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related