javascript - 在 Ext 3.4 框架上使用 debounce

Question

我想在 Ext.Button 上实现 debounce 函数，所以我扩展了它并重写了 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);
    }
});

Debounce 是在 x 类型声明上传递的参数。

这里的问题是，当我传递给 onClick 的“args”参数从“click”调用到“mouvemove”时，它发生了变化，并且它没有触发它应该触发的事件。

有没有办法记录函数中收到的“e”参数以传递给父类(super class)的 onClick？

Answer 1

传递给 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);
  }
});