0

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

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

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

4

2 回答 2

0

错误是在我正在测试的某些移动设备上（不是全部！）有时会发送 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');
    }
}
于 2014-05-22T11:08:48.237 回答
0

正如@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();
  });

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

于 2014-05-21T12:59:09.730 回答