GWT 计时器取消不起作用

我正在尝试编写代码来使用 GET 和 GETQuery 区分单击和双击。我明白了here http://jsfiddle.net/KpCwN/4/。所以我将它翻译成 GWT，如下所示：（我的应用程序不能有全局变量，所以我用元素属性来完成该部分）：

$("img").live("click", new Function() {
         public boolean f(Event event) {
            String clicksString = $(event).attr("clicks");
            int clicks = Integer.parseInt(clicksString);
            clicks++;
            $(event).attr("clicks",String.valueOf(clicks));
            Timer t = new Timer() {

                @Override
                public void run() {
                    Window.alert("Click");
                    $(event).attr("clicks","0");
                }
            };

            if (clicks == 1) {
              t.schedule(200);
            }

            else {
              t.cancel();
              $(event).attr("clicks","0");
              Window.alert("Double Click");
            }
            return true;
          }
});

在这里，当单击图像时，会弹出一个警报，显示单击，如果用户双击（200毫秒内），它应该弹出双击。单击时效果很好，但双击时，即使双击单击时会弹出警报Ok为了摆脱它，我找到了单击警觉等待被摆脱。

不知何故，我认为t.cancel()双击时不会触发。谁能告诉我如何解决这个问题？

Update:

接受的解决方案适用于警报，但是当我需要时event参数也一样，需要稍微调整一下。这样做之后，问题再次出现，计时器没有被清除，现在我收到两个警报，双击 and Click..:

          $("img").live("click", new Function() {
              int clicks = 0;

            public boolean f(Event event) {

                  Timer t = new Timer() {

                    @Override
                    public void run() {
                        clicks = 0;
//                            Here I need the event paramater

                    }
                };
                if (clicks++%2 == 0) {
                    t.schedule(5000);
                }
                else {
                    t.cancel();
                    clicks = 0;
 //                       Here also I need the event paramater
                }
                return true;
            }
          });

由@Manolo 更新：根据我下面的评论，最后的代码应该是：

      $("img").live("click", new Function() {
        int clicks = 0;
        Event event;
        Timer t = new Timer() {
           @Override
            public void run() {
               // Use the event
               event....
            }
        };
       public boolean f(Event event) {
            this.event = event;
            if (clicks++%2 == 0) {
                t.schedule(5000);
            } else {
                t.cancel();
                // Use the event
                event....
            }
            return true;
        }
      });

以下代码与您所说的 jsfiddle 示例中的代码完全相同：

  $("img").click(new Function() {
    boolean b = false;
    Timer t = new Timer() {
      public void run() {
        Window.alert("Click");
      }
    };
    public void f() {
      if (b = !b) {
        t.schedule(200);
      } else  {
        t.cancel();
        Window.alert("Double Click");
      }
     }
  });

除非您之前曾将事件沉入该元素，否则阻止默认片段是不必要的，但在这种情况下，代码应该是：

  $("img").dblclick(new Function() {
    public boolean f(Event e) {
      return false;
    }
  });

EDITED: 如果您希望每个匹配元素都有唯一的变量，最好的方法是创建与元素一样多的函数。使用GQuery.each()是更简单的方法：

  $("img").each(new Function() {
    public void f() {
      $(this).click(new Function() {
        boolean b = false;
        Timer t = new Timer() {
          public void run() {
            Window.alert("Click");
          }
        };
        public void f() {
          if (b = !b) {
            t.schedule(200);
          } else  {
            t.cancel();
            Window.alert("Double Click");
          }
         }
      });
  }});

您甚至可以只使用一个函数并在元素中存储变量，但您不仅应该像在查询中假装那样存储计数器，还应该存储每个元素的计时器：

  $("img").click(new Function() {
    public void f() {
      boolean b = $(this).prop("c", Boolean.class);
      Timer t = $(this).prop("f");
      if (t == null) {
        t = new Timer() {
          public void run() {
            Window.alert("Click");
          }
        };
        $(this).prop("f", t);
      }
      if (b = !b) {
        t.schedule(200);
      } else  {
        t.cancel();
        Window.alert("Double Click");
      }
      $(this).prop("c", b);
     }
  });