setTimeout и clearTimeout на альтернативных кликах

Я пытаюсь создать front-end для системы управления задачами, и я застрял в проблеме setTimeout. Я пытаюсь сделать так, чтобы, когда пользователь нажимает флажок, плитка исчезает до 33% непрозрачности/переключает "завершенный" класс, ждет 2 секунды, а затем исчезает; если пользователь снова нажмет на флажок перед его исчезновением, задача должна переключить класс и очистить тайм-аут.

У меня возникли проблемы с работой команды clearTimeout. Я объявил свою переменную таймера вне соответствующих блоков, попытался добавить команды clearQueue() и stop() к моей функции и трехкратно проверенную орфографию.

Моя скрипка JS находится здесь: http://jsfiddle.net/sLYA9/.

Вот моя соответствующая JS:

$('#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');

});

Опять же, я хочу, чтобы пользователь мог снова щелкнуть этот флажок до того, как таймер 2000 мс поднялся и очистил таймер.

Любые идеи, что я пропустил?

EDIT: Сейчас я чувствую себя глупо. Перемещение объявления моего таймера за пределы функции обработчика щелчка заставило его работать правильно.