Question

我正在进入以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);
        });
});

当我尝试添加诸如commit.debounce（500）.concatMap（（username）=>

Rx.js:8512 Uncaught TypeError: this.durationSelector.call is not a function
at DebounceSubscriber._next (Rx.js:8512)
at DebounceSubscriber.Subscriber.next (Rx.js:424)
at MapSubscriber._next (Rx.js:5715)
at MapSubscriber.Subscriber.next (Rx.js:424)
at HTMLButtonElement.handler (Rx.js:3913)
at HTMLButtonElement.dispatch (jquery.min.js:3)
at HTMLButtonElement.r.handle (jquery.min.js:3)

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

我认为是我导入或引用库的方式所致，这是造成混淆的地方。

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

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

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

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

<script src="/myapp/javascript/rx.all.js"></script>

我收到的Rx不确定。这两种不同的参考方式之间有什么细微差别。

导入rxjs以供客户端使用的surefire方法是什么？这可能是导致反跳不起作用（没有完整的lib）的原因吗？

谢谢！

Answer 1

您应该为此使用debounceTime，而不是使用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);
        });
});

如果您想使用防抖功能，可以执行以下操作：

    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，因为它会改变像去抖之类的运算符的处理方式和concatMap-稍后进行更改很痛苦，因此最好在刚开始时进行更改！

在rxjs客户端Web应用中使用去抖动功能

1 个答案: