在移动设备上的clearTimeout / setTimeout

Question

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

如果单击它，它应该显示一些线条并在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();
});

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

Answer 1

正如@wumm所提到的，它也可以在我的iPhone5 iOS7中使用。 您可以尝试的另一种方法是我为您设置的小提琴： http : //jsfiddle.net/thePav/jC32X/5

的HTML

<button id="showLines">Show Lines</button>

JS

var timeout;
var flag = false;

  function buttonCallback() {
    $('#showLines').click(function(){
      if(flag == false){
        flag = true;
        //show lines here
        timeout = setTimeout(function(){
          flag = false;
          //hide lines here
        }, 3000);
      }else{
        flag = false;
        clearTimeout(timeout);
        //hide lines here
      }
    });
  }

  $(document).ready(function(){
    buttonCallback();
  });

不确定代码的问题是什么，但这只是实现它的另一种方法。

Answer 2

错误是在我正在测试的某些移动设备上（不是全部！）有时会发送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');
    }
}