사항 clearTimeout /에서는 setTimeout 모바일 장치에서

Question

나는 다음과 같은 기능이있는 버튼을 확인해야

: 당신이 그것을 클릭하면

, 그것은 일부 라인을 보여 3 초 후에을 숨겨야합니다,하지만 당신은 버튼을 클릭하면 3 초가 지나기 전에 줄이 숨겨져 있어야합니다.

저는 데스크톱 브라우저에서 완벽하게 작동하는 코드를 작성했지만 모바일 브라우저에서는 그렇지 않습니다. 안드로이드 장치는 내 clearTimeout을 무시하는 것처럼 보이고 아이폰에서는 "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

오류는 일부 휴대 기기에서 (전부는 아니지만) 2 탭 이벤트 (두 번 탭)를 보내는 경우가 있습니다.

지연 시간이 추가되었고 마지막에 함수가 호출 된 시간을 확인하도록 수정했습니다.

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'); 
    } 
} 

Answer 2

@wumm이 언급했듯이, 그것은 내 iPhone5 iOS7에서도 잘 작동합니다. 당신이 시도 할 수 또 다른 방법은 당신이 바이올린 I 설정입니다 : 코드에 문제가 있었다 그러나 이것은 또 다른 방법은 무엇 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(); 
    }); 

확실하지 않음 그것을 구현합니다.