Question

我试图建立一个基类来发布一个方法，用于对诸如document.onscroll事件之类的高频率事件调用进行四舍五入。这是我的基类：

class ThrottledRunner {
    private timerId: number;
    lastTimeRun: number;
    runAtMostEvery = 100;

    // Here is the Method
    runThrottled(action: (e: ThrottledRunner) => void) {
        var now: number = new Date().getTime();

        if (this.timerId == null) {
            if (now - this.lastTimeRun > (3 * this.runAtMostEvery)) {
                action(this);
                this.lastTimeRun = now;
            }
            this.timerId = setTimeout(function (e: ThrottledRunner) {
                e.timerId = null;
                e.lastTimeRun = new Date().getTime();
                action(e);
            }, this.runAtMostEvery);
        }
    }
}

我的派生类：

class MyTest extends ThrottledRunner {

    myProp: string = "works";

    constructor() {
        super();
        window.addEventListener("scroll", () => this.runThrottled(this.onScroll(this)));
        // Supplied parameters do not match any signature of call target.
        // Could not select overload for 'call' expression.
    }

    onScroll(self: MyTest): void {
        alert(self.myProp);
    }
}

由于MyTest派生自ThrottledRunner，runThrottled()应该接受它作为参数，但似乎我错了。我完全搬到了Typescript + vanillajs，所以没有jQuery的答案。

Answer 1

你有没有看过使用underscorejs throttle（）函数？

_.throttle(function, wait, [options])

创建并返回传递函数的新的受限制版本，当重复调用时，每隔等待毫秒最多只调用一次原始函数。对于速度限制事件非常有用，这些事件的发生速度比您能跟上的速度要快。

Underscore有许多非常有用的功能，并且具有完整的TypeScript和nuGet支持：underscore.TypeScript.DefinitelyTyped

Answer 2

当你需要等待onScroll应用程序准备就绪时，你不能像执行时那样立即调用它runThrottled。我已将onScroll方法更改为不需要参数，因为this上下文设置正确。

如果您将课程更改为：

class MyTest extends ThrottledRunner {
    myProp: string = "works";
    constructor() {
        super();
        window.addEventListener("scroll",
             () => this.runThrottled(() => this.onScroll()));
    }

    onScroll(): void {
        console.log(this.myProp);
    }
}

this在runThrottled的上下文中是正确的。

Typescript派生类作为回调签名

2 个答案: