javascript - 如何在调用同一事件的同时保持一个事件

Question

如何以 Angular 保持事件触发。

这个问题与我的另一个问题相关:how to stop array.filter() function

我已经尝试过所有答案。但我对这个答案并不满意。

所以我按照自己的想法做了一些事情。

问题: 我有一个 ngmodelchange 事件，用于调用方法。您可以查看我关于为什么使用 ngModelChange() 事件的最新问题。无论如何，我也会在这里解释一下。

我使用 ngModelChange 事件搜索和过滤大量数据。所以问题是当我连续输入字符时应用程序挂起。

我的建议

所以我建议自己在用户停止打字后使用一些逻辑来调用过滤函数。但我们不知道用户何时会停止输入。

所以我在下面创建了一个逻辑。

我做了什么

(ngModelChange)="clearSearch(gloablFilterValue)"// html side

在 .ts 端

 clearSearch(newValue: string) {
       this.oldFilterText = newValue;
        if (this.isLooping) {
            return false;
        }  

        for (let i = 0; i > newValue.length + 1; i++) {
            this.isLooping = true;
            if (this.oldFilterText == newValue) {
                this.splitCustomFilter();//filter function
            }
        }

    }

上面的代码不起作用。我刚刚开始写逻辑。所以如果有人有任何想法。请跟我一起提出实现这一目标的建议和想法。

主要问题

如何停止事件触发，直到用户在文本框中输入值？我们如何启动事件来触发用户在文本框中键入值？

**重要提示:我不想使用焦点移出和模糊事件。因为过滤器应该在用户输入值时起作用。

Answer 1

您正在寻找的称为去抖动。一个不错的选择是限制。 RxJS 支持两个运算符，称为 debounceTime和throttleTime 。这是如何使用它们的快速示例。

在模板中，监听输入事件(或其他一些事件，具体取决于您在用例中监听的内容)。

<input type=text (input)="onInput($event.target.value)">

在您的组件代码中，创建一个主题，然后在订阅它之前对其使用适当的运算符。

// create a subject
private subject = new Subject<string>()

// function to call when event fires
public onInput(input: string) { this.subject.next(input) }

ngOnInit() {
  // debounce the stream
  this.subject.debounceTime(300).subscribe(inputText => {
     // this is where you can do you .filter
     console.log(inputText)
  })
}

当然，您可以根据需要调整 300 参数。