대체 클릭시 setTimeout 및 clearTimeout

작업 관리 시스템에 프런트 엔드를 만들려고하는데 setTimeout 문제가 발생합니다. 사용자가 체크 상자를 클릭하면 타일이 33 % 불투명도로 사라지고 "완료"클래스가 토글되고 2 초 동안 기다린 다음 사라지도록하려고합니다. 사용자가 사라지기 전에 확인란을 다시 클릭하면 작업이 클래스를 전환하고 시간 초과를 지워야합니다.대체 클릭시 setTimeout 및 clearTimeout

clearTimeout 명령을 작동하는 데 많은 문제가 있습니다. 내가 관련 타이머 블록 변수를 선언하고 내 함수에 clearQueue() 및 stop() 명령을 추가하고 삼중 검사 맞춤법 검사를 시도했습니다.

내 JS 피들 여기에 : http://jsfiddle.net/sLYA9/. 나는 사용자가 최대 인 2000 밀리 초 타이머 전에 체크 박스를 한번 더 클릭 할 수 있도록 좋아하고 타이머를 취소 한 것, 다시

$('#alltasks .taskitem form').click(function (event) { 
    event.preventDefault(); 
    // Variables for different referenced elements 
    var tile = $(this).parent('.taskitem'); 
    var taskContents = '<div class=\'taskitem\' draggable=\'true\'>' + tile.html() + '</div>'; 
    var timer; 

    // Unchecking a checked task 
    if (tile.hasClass('completed')) { 
    clearTimeout(timer); 
    tile.clearQueue().stop().fadeTo(300, 1); 
    } else { // Checking an unchecked task 
    tile.fadeTo(300, 0.33); 
    timer = setTimeout(function() { 
     alert("the task disappears"); 
    }, 2000); 
    } 
    tile.toggleClass('completed'); 

});

여기 내 관련 JS입니다.

내가 놓친 아이디어가 있습니까?

편집 : 나는 바보가되었습니다. 클릭 핸들러 함수 밖에서 내 타이머 선언을 움직이면 제대로 작동합니다.

출처

2013-10-21 Lee

타이머는 첫 번째 클릭 기능에서 범위가 지정됩니다. 클릭 콜백 바깥 쪽에서 var 타이머를 움직이면 작동합니다. 타이머가 "완료"상태인지 알 수 있습니다.

출처

2013-10-21 18:09:54 jeremy

타이머의 범위는 로컬이므로 호출 할 때마다 새 범위가 있습니다.

가변 타이머는 클릭 기능 외부에서 선언해야합니다.

출처

2013-10-21 18:06:01 epascarello

와우, 나는 바보처럼 느낍니다. 감사! (방금 내 var 타이머를 옮겼습니다. 내 클릭 핸들러 기능에서) – Lee

대체 클릭시 setTimeout 및 clearTimeout

답변

관련 문제