时间戳

首页 > 解决方案 > CodeMirror：onChanges - 如何检测更改是什么？

javascript - CodeMirror：onChanges - 如何检测更改是什么？

问题描述

我有一个应用程序，允许用户输入 CodeMirror 文本框。
我使用SignalR连接到服务器，并在更改事件时推送文本框的全文。

问题是每次用户键入一个字母时，更改都会被推送到服务器。我设法用这样的语句
过滤掉空白和换行：if

    editorChanges(doc, changes: any[]) {
        if (changes[0].text.some(str => str)) {
            this.signalrHub.push(this.editor.value());
        }
    }

我认为我需要的是使用RxJs的解决方案。
我并不熟悉 RxJs。
有没有人有这方面的经验？
以前有人做过这种事情吗？

标签： javascriptrxjscodemirror

解决方案

您可以使用fromEvent、map和运算符debounceTime的组合distinctUntilChanged。

import { of, fromEvent } from 'rxjs';
import { map, debounceTime, distinctUntilChanged } from 'rxjs/operators';

let codeTextBox = document.getElementById('codetextbox');

let sourceStream$ = fromEvent(codeTextBox, 'input')
  .pipe(
    map((x: any) => x.target.value),
    debounceTime(300),
    distinctUntilChanged()
  );

cont mysubscription = sourceStream$.subscribe(x=>{
  console.log(x) //<-- this is the latest text in the textbox
});

//mysubscription.unsubscribe(); <-- add this line when your view is getting destroyed

另外，请注意不要subscribe多次。理想情况下subscribe，当文本框在 DOM 中可用时，应该只发生一次。并且不要忘记unsubscribe否则你会有内存泄漏。

推荐阅读