交替点击时的 setTimeout 和 clearTimeout答案

【问题标题】：setTimeout and clearTimeout on alternate clicks交替点击时的 setTimeout 和 clearTimeout
【发布时间】：2013-10-22 02:11:18
【问题描述】：

我正在尝试创建任务管理系统的前端，但遇到了 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 毫秒计时器结束之前再次单击复选框并清除计时器。

有什么我错过的想法吗？

编辑：我现在觉得很傻。将我的计时器声明移到点击处理函数之外使其正常工作。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

计时器的范围是本地的，因此每次调用它时都会有一个新的范围。

变量 timer 需要在 click 函数之外声明。

【讨论】：

哇，我觉得自己像个白痴。谢谢！（我只是将我的 var 计时器移出我的点击处理函数）

【解决方案2】：

您的计时器范围在第一个“点击”函数中。如果您将 var timer 移到点击回调之外，它会起作用。您可以检查计时器何时触发以查看它是否仍然“完成”

【讨论】：