javascript - 在Ext 3.4框架上使用反跳

我想在Ext.Button上实现反跳功能，因此我对其进行了扩展并覆盖了onClick函数，如下所示：

MyButton = Ext.extend(Ext.Button, {
    onClick:  function(e) {
        var that = this;
        var args = e;
        clearTimeout(this.timeoutDebounce);

        this.timeoutDebounce = setTimeout(function(){
                  MyButton.superclass.onClick.apply(that, [args])
        }, this.debounce);
    }
});

防反跳是在x类型声明中传递的参数。

这里的问题是，当我将其传递给onClick的“ args”参数从“ click”更改为“ mouvemove”时，它已更改，并且不会触发应有的事件。

有没有一种方法可以记录函数中接收的“ e”参数以传递给超类的onClick？

最佳答案

必须包装传递给setTimeout的函数，以便将值保留在当前范围内：

function createCallback(args) {
  return function() {
    MyButton.superclass.onClick.apply(that, [args]);
  }
}

另外，e通过引用传递，因此您需要创建它的副本。使用ExtJS，可以使用Ext.apply方法：

Ext.apply({}, e);

完整的代码应为：

var MyButton = Ext.extend(Ext.Button, {
  onClick: function(e) {
    var that = this;
    function createCallback(args) {
      return function() {
        MyButton.superclass.onClick.apply(that, [args]);
        // you can also use call since you know the arguments:
        // MyButton.superclass.onClick.call(that, args);
      }
    }

    clearTimeout(this.timeoutDebounce);

    var copy = Ext.apply({}, e);
    this.timeoutDebounce = setTimeout(createCallback(copy), this.debounce);
  }
});