javascript - GWT 计时器取消不起作用

Question

我正在尝试编写代码来使用 GWT 和 GWTQuery 区分单击和双击。我明白了here 。所以我将它翻译成 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毫秒内)，则应该弹出双击强>。单击时效果很好，但双击时，即使弹出双击警报，单击确定摆脱它时，我发现>单击警报等待被删除。

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

更新:

接受的解决方案对于警报来说效果很好，但是当我还需要 event 参数时，它必须稍微调整一下。这样做之后，问题再次出现，计时器没有被清除，现在我收到两个警报，双击和点击..:

          $("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;
        }
      });

Answer 1

以下代码与您所说的 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;
    }
  });

已编辑: 如果您希望每个匹配元素都有唯一的变量，最好的方法是创建与元素一样多的函数。使用 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);
     }
  });