在 Angular2 和 Typescript 中使用 lodash debounce 滚动不起作用答案

【问题标题】：Using lodash debounce in Angular2 & Typescript scroll not working在 Angular2 和 Typescript 中使用 lodash debounce 滚动不起作用
【发布时间】：2017-04-02 21:02:00
【问题描述】：

我有以下调用 lodash debounce 函数的代码：

@HostListener("window:scroll", [])
onWindowScroll() {
    if (myBoolean) 
       _.debounce(this.onScrollDown(), 1500, false);

    }
}

private onScrollDown() {
    console.log("onScrollDown")
}

但我在控制台中收到此错误：

Argument of type 'void' is not assignable to parameter of type 'Function'.

以及浏览器上的以下内容：

TypeError: Expected a function
    at Function.debounce

顺便说一句，我正在使用打字稿

【问题讨论】：

您没有将函数传递给 .debounce？您正在传递一个返回 undefined 的被调用函数
我现在这样使用它，但仍然无法正常工作：_.debounce( ()=> { console.log("onScrollDown") }, 1500, {});
定义“无效”。
@JBNizet 不在第一个参数中打印 console.log
每次滚动时，您都在创建一个去抖函数，但您对这个创建的函数没有任何作用。它没有存储在任何地方，也从未调用过。您可能想要做的是一劳永逸地创建一个去抖动函数，并在每次滚动时调用该去抖动函数。

标签： angular typescript lodash angular2-template angular2-directives

【解决方案1】：

我不熟悉 lodash，但我认为您想要的是：

private debouncedOnScroll = _.debounce(() => this.onScrollDown(), 1500, {});

@HostListener("window:scroll", [])
onWindowScroll() {
    this.debouncedOnScroll();
}

private onScrollDown() {
    console.log("onScrollDown")
}

【讨论】：

debounce里面怎么传参数？
你需要比这更清楚。你想达到什么目标？
如果我想在onScrollDown里面使用一些参数怎么实现呢？假设我想打印 private onScrollDown() { console.log(myString) }
myString 来自哪里？就像在您的示例中一样，它将是一个全局变量。另外，你读过文档吗？ lodash.com/docs/#debounce
onWindowScroll() { let myString = "fizz"; this.debouncedOnScroll(); }

【解决方案2】：

感谢 JB Nizet，我可以解决我的需求，这是我的方法：

1) 创建你想要去抖动的函数：

private projectsLoad(myParameter): void {
   // function code here...
};

2) 将其分配给类的字段/成员：

private debounceProjectsLoad = _.debounce(
    (myParameter) => this.projectsLoad(myParameter),
    1500,
    true
);

3) 需要时调用去抖字段/成员：

public loadProjectsGroup(myParameter: string): void {
    this.debounceProjectsLoad(myParameter);
}

【讨论】：

谢谢！很好的解释。注意：在第 2 步中，您可以将第三个参数留空，或者如果您想填充它，应该是一个对象