Question

我正在尝试为任务管理系统创建一个前端，而且我遇到了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毫秒计时器启动之前再次单击该复选框并清除计时器。

我错过了哪些想法？

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

Answer 1

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

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

Answer 2

您的计时器作用于第一个“点击”功能。如果你在单击回调之外移动var计时器就可以了。您可以检查计时器何时触发以查看它是否仍然“完整”

替换点击的setTimeout和clearTimeout

2 个答案: