在 Ext 3.4 框架上使用 debounce

Question

我想在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);
    }
});

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

这里的问题是我传递给 onClick 的 "args" 参数在被调用时从 "click" 更改为 "mouvemove" 并且它没有触发它应该触发的事件.

有没有办法记录函数中接收到的"e"参数传递给超类上的onClick？

Answer 1

您应该克隆对象：

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

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

Answer 2

必须包装传递给 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);
  }
});

在 Ext 3.4 框架上使用 debounce

Use of debounce on Ext 3.4 framework

javascript

extjs

debounce