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-type 声明上传递的参数。

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

有没有办法记录函数中收到的“e”参数传递给超类的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);
  }
});

Answer 2

您应该克隆对象：

var args = Ext.apply({}, e);

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