Search code examples
javascriptjqueryclearintervalcleartimeout

Android wont clear time interval


I have an issue where on a android device, the ClearInterval command wont work. If i use it on IOS it works a charm! Clears perfectly, but on android it wont clear for me. Why is this? I cant honestly figure it out! I ran some alerts and it is getting into the touchstart, and touchend and the timeout runs perfectly but its the timeinterval that wont get cleared!

My code:

var touchticker = null;
var touchtickerint = null;

//TouchStart Volume UP
$("#volumeup").on("touchstart", function() {
    touchticker = setTimeout(function() {
        touchtickerint = setInterval(function() 
        {
            $("#volumeup").click();
        }, 100);
    }, 500);
});

//TouchEnd Clear Timeout
$(document).on("touchend", function() 
{
    clearInterval(touchtickerint);
    clearTimeout(touchticker);
});

Solution

  • From https://github.com/TNT-RoX/android-swipe-shim:

    On some Android devices when the user touches the screen a touchstart event is fired, Android passes the event to WebView (javascript) to be handled. If WebView does not preventdefault (within 200ms), Android resumes native scrolling and stops passing touch events to WebView.

    The solution to this has mostly been to preventDefault on touchstart and manually scroll using javascript.

    var touchticker = null,
        touchtickerint = null,
        volumeup = $("#volumeup"),
        isAndroid = /Android/i.test(navigato​r.userAgent);
    
    //TouchStart Volume UP
    volumeup.on("touchstart", function(event) {
        if (isAndroid) { event.preventDefault(); volumeup.click(); }
        touchticker = setTimeout(function() {
            clearInterval(touchtickerint);
            touchtickerint = setInterval(function() {
                volumeup.click();
            }, 100);
        }, 500);
    });
    
    //TouchEnd Volume UP, Clear Timeout
    $(document).on('touchend touchcancel', function() {
        clearInterval(touchtickerint);
        clearTimeout(touchticker);
    });