在移动设备上的clearTimeout / setTimeout

debugcn 发表于 Dev

苹果浏览器

我必须制作一个具有以下功能的按钮：

如果单击它，它应该显示一些线条并在3秒后隐藏它们，但是如果在3秒钟结束之前单击该按钮，这些线条也应该隐藏。

我编写了一些可以在桌面浏览器上完美运行的代码，但是在移动浏览器上却不能。Android设备似乎忽略了我的clearTimeout，而在iPhone上，它似乎更像是一个“ buttonPressed”事件。

我创建了一个jsfiddle，以便您可以看到我写的内容。

var timeout = null;
var buttonCallback = function() {
    if( timeout === null ) {
        log('show lines');
        timeout = setTimeout(buttonCallback, 3000);
    }
    else {
        clearTimeout(timeout);
        timeout = null;
        log('hide lines');
    }
}


var hammerElement = Hammer(document.getElementById('showLines'));

hammerElement.on("touch", function(e) {
    e.preventDefault()
    buttonCallback();
});

知道如何使这种行为适用于移动浏览器吗？

苹果浏览器

错误是在我正在测试的某些移动设备上（不是全部！）有时会发送2个标签事件（双标签）。

为了解决这个问题，我添加了delayTime并检查了上次调用该函数的时间。

var buttonCallback = function() {
    if( timeout === null ) {
        //for old slow andoid devices
        if ((new Date().getTime() - delayTime) < 2200) 
            return;
        delayTime = new Date().getTime();
        log('show lines');
        timeout = setTimeout(buttonCallback, 3000);
    }
    // for fast devices to prevent the double tab error
    else if ( (new Date().getTime() - delayTime) > 1200 ) {
        clearTimeout(timeout);
        timeout = null;
        log('hide lines');
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。