Javascript 在rxjs客户端webapp中使用debounce

我将从rxjs开始进入函数式反应式代码，并对如何最好地导入它提出了一些问题，因为我得到的结果好坏参半

目前，我有一个简单的实现，其中我检查web服务是否已经存在用户名

以下是工作完美的代码：

$(window).load(function() {
    // setup an observable
    submission = Rx.Observable.fromEvent($("#submitbutton"), "click").map(
        event => {
            return "justsomeusername";
        }
    );

    submission
        .concatMap(username => {
            return Rx.Observable.fromPromise(
                $.get(
                    "{{ site.serveraddress }}/checkuser?&username=" + username
                )
            ).catch(() => Rx.Observable.empty());
        })
        .subscribe(rval => {
            console.log(rval);
        });
});

这一切都很好，但当我尝试添加一个类似于debounce的提交时。debounce（500）.concatMap（（用户名）=>

这就是控制台中显示的内容

我认为我导入或引用库的方式是原因所在，这就是存在一些混乱的地方

我在HTML页面顶部这样导入：

<script src="https://unpkg.com/@reactivex/rxjs@5.5.6/dist/global/Rx.js"></script>

如果我尝试导入任何其他引用，Rx对象似乎不存在？这是否与文件名可能成为对象命名空间有关

例如，我下载了所有最新的rxjs版本，并在dist中查看rx.all.js，但如果我在本地导入一个最新的dist，如：

我得到了未定义的Rx。这两种不同的参照方式之间的细微差别是什么

导入rxjs供客户端使用的可靠方法是什么？这是否可能是导致解Bounce不工作（没有完整库）的原因

---

谢谢！

您应该为此使用debounceTime，而不是debounce。debounce使用一个函数参数，该参数必须动态确定debounce时间，而debounceTime可以完全按照您的状态使用：

$(window).load(function() {
    // setup an observable
    submission = Rx.Observable.fromEvent($("#submitbutton"), "click").map(
        event => {
            return "justsomeusername";
        }
    );

    submission
        .debounceTime(500)
        .concatMap(username => {
            return Rx.Observable.fromPromise(
                $.get(
                    "{{ site.serveraddress }}/checkuser?&username=" + username
                )
            ).catch(() => Rx.Observable.empty());
        })
        .subscribe(rval => {
            console.log(rval);
        });
});

如果您想使用debounce，您可以这样做：

    submission
        .debounce((val) => {
            // Add whatever logic for determining the right
            // debounce time for the value entered by the 
            // user, in this case, simply returning a hard
            // coded 500 which will do exactly the same as
            // debounceTime(500)
            return 500;
        })
        .concatMap(username => {
            // ... snip ...
        });
});

---

您导入RxJS的方式似乎没有任何问题-尽管我建议您刚开始使用RxJS时转到v6，因为它改变了debounce和concatMap等运营商的许多操作方式-以后更改这一切是一件痛苦的事情，所以最好在刚开始时进行更改！

Hi Mark，谢谢我将我的导入更改为按照github，它导致了6.2.2，这很好，但随后我得到了“未捕获的TypeError:rxjs.Observable.fromEvent不是函数”所以这现在似乎是一个名称空间导入问题。您是否能够使用该导入使用映射建立一个简单的可观察对象？从5到6的名称空间似乎从Rx更改为rxjs。V6中的许多内容都有所不同-它们将大多数内容从方法更改为函数。因此，observable.fromEvent变为fromEvent（），Observable.fromPromise变为just from（），等等。所有操作符现在都需要管道化，例如submission.pipe（debounceTime（500），concatMap（…）…Google for rxjs v5到v6迁移，以获得比我在评论中提供的更好的指南：）

    submission
        .debounce((val) => {
            // Add whatever logic for determining the right
            // debounce time for the value entered by the 
            // user, in this case, simply returning a hard
            // coded 500 which will do exactly the same as
            // debounceTime(500)
            return 500;
        })
        .concatMap(username => {
            // ... snip ...
        });
});