Question

我必须创建一个具有以下功能的按钮：

如果你点击它，它应该显示一些线并在3秒后隐藏它们，但是如果你在3秒之前点击按钮，那么线也应该隐藏。

我编写了一些在桌面浏览器上完美运行的代码，但在移动浏览器上却没有。 Android设备似乎忽略了我的clearTimeout，而在iphone上它似乎更像是一个＆＃34; buttonPressed＆＃34;事件

我创建了一个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');
    }
}

移动设备上的clearTimeout / setTimeout

2 个答案: