JQuery Mouseup on iOS

Question

I've recently added the jquery.mouse2touch.min.js plugin to my game, and after testing it out I ran into a problem. My movement system is made up of two divs (one to move the player left and one to move him right), basically when you press and hold the div, the player should move in one direction and when you let go, he should stop. The problem is that if I press down for too long and then let go, the player doesn't stop.

Here's the code that gets him moving:

// iControl System
var $div = $('#character');

$('#ios-left').mousedown(function(){
   leftTimer = setInterval(function(){
       processWalk('left');
   },100);
}).mouseup(function(){
    $('#character').stop();
    clearInterval(leftTimer);
}).mouse2touch();

$('#ios-right').mousedown(function(){
    rightTimer = setInterval(function(){
       processWalk('right');
    },100);
}).mouseup(function(){
    $('#character').stop();
    clearInterval(rightTimer);
}).mouse2touch();

and a fiddle: http://jsfiddle.net/gqfesrhw/

Thanks (Also if anyone thinks that this may be a problem with the mouse2touch plugin, I'd be open to other suggestions)

Answer 1

Working Fiddle

The issue with timer, you should clear-time-interval before move. Your global variable TimerWalk with clearInterval(TimerWalk); should be useful.

Here is the code block

$('#ios-left').mousedown(function () {
    clearInterval(TimerWalk);
    TimerWalk = setInterval(function () {
        processWalk('left');
    }, 100);
}).mouseup(function () {
    $div.stop();
    clearInterval(TimerWalk);
}).mouse2touch();

$('#ios-right').mousedown(function () {
    clearInterval(TimerWalk);
    TimerWalk = setInterval(function () {
        processWalk('right');
    }, 100);
}).mouseup(function () {
    $div.stop();
    clearInterval(TimerWalk);
}).mouse2touch();

This is only fix for proper movement, you may need to address other issues.