Question

I’m trying to make touch controls for a little game I’m writting with the help of jquery. But i just can’t figure out how to write a function that basicly does the same thing that happens when you keep a key pressed.
Could you please help me?

PS. its not originaly my code source

jQuery.fn.mousehold = function(timeout, f) {
    if (timeout && typeof timeout == 'function') {
        f = timeout;
        timeout = 100;
    }
    if (f && typeof f == 'function') {
        var timer = 0;
        var fireStep = 0;
        return this.each(function() {
            jQuery(this).mousedown(function() {
                fireStep = 1;
                var ctr = 0;
                var t = this;
                timer = setInterval(function() {
                    ctr++;
                    f.call(t, ctr);
                    fireStep = 2;
                }, timeout);
            })

            clearMousehold = function() {
                clearInterval(timer);
                if (fireStep == 1) f.call(this, 1);
                fireStep = 0;
            }

            jQuery(this).mouseout(clearMousehold);
            jQuery(this).mouseup(clearMousehold);
        })
    }
}

$.fn.extend({
    disableSelection: function() {
        this.each(function() {
            this.onselectstart = function() {
                return false;
            };
            this.unselectable = "on";
            $(this).css('-moz-user-select', 'none');
            $(this).css('-webkit-user-select', 'none');
        });
    }
});

Answer 1

Well the question is, how often do you want to check for a change in user input. You are quite limited when it comes to the resolution of a timer in JS. Although be aware that everything is running in sequence and thus events are queued and potentially sum up. This is especially true for setInterval() as it rigorously queues new events, even when previously triggered events were not yet processed.

Something like this works:

var pressed;  // flag for continous press between mousedown and timer-events
var duration; // number of times the timer fired for a continous mousedown
var timeout;  // reference to timer-event used to reset the timer on mouseup

$(document).mousedown = function(){
    pressed = true;
    handleMousedown(false);
}

function handleMousedown(continued){
    if(pressed){    // if still pressed
        if(continued){  // and fired by the timer
            duration++;
            // measure time, use duration 
            // do anything 
        }
        timeout = setTimeout('handleMousedown(true)', 100); // wait for another 100ms then repeat
    }
}

$(document).mouseup = function() {
    // do sth on mouseup
    pressed = false;  // reset flag for continous mousedown
    clearTimeout(timeout); // abandon the timer
}

$(document).mouseout = function() {   // $(document).mouseenter = function(){
    // do sth on mouse leave or mouse entering again according to how your game should behave
    pressed = false;  // reset flag for continous mousedown
    clearTimeout(timeout); // abandon the timer
}