javascript – RxJs – observer.isStopped,observer.observer.isStopped和observed.m.isDisposed之间的区别是什么

2023年2月18日 225次阅读

我想找到一种方法来检测观察者是否已经完成使用我使用Rx.Observable.create创建的自定义observable,这样定制的observable可以结束它并正确地进行一些清理.

因此,我创建了一些测试代码,如下所示,为此目的找出观察者对象上可用的字段类型.

var Rx = require("rx")

var source = Rx.Observable.create(function (observer) {

  var i = 0;
  setInterval(function(){
    observer.onNext(i);
    console.dir(observer);
    i+=1
  }, 1000)

});

var subscription = source.take(2).subscribe(
  function (x) { console.log('onNext: %s', x); }
);

输出如下

onNext: 0
{ isStopped: false,
  observer: 
   { isStopped: false,
     _onNext: [Function],
     _onError: [Function],
     _onCompleted: [Function] },
  m: { isDisposed: false, current: { dispose: [Function] } } }
onNext: 1
onCompleted
{ isStopped: true,
  observer: 
   { isStopped: false,
     _onNext: [Function],
     _onError: [Function],
     _onCompleted: [Function] },
  m: { isDisposed: true, current: null } }

似乎观察者对象上有3个字段似乎与我的目标有关,即observer.isStopped,observer.observer.isStopped和observer.m.isDiposed.

我想知道他们都是关于什么以及我应该选择哪一个.

================================================== ============================
我的问题的动机

根据Andre的建议,我添加了激发我的问题的场景.

在我的应用程序中,我试图基于window.requestAnimationFrame(回调)机制做一些UI动画. requestAnimationFrame将在浏览器渲染引擎确定的时间内调用提供的回调.回调应该做一些动画步骤,并再次递归调用requestAnimationFrame直到动画结束.

我想将此机制抽象为可观察的,如下所示.

function animationFrameRenderingEventsObservable(){
    return Rx.Observable.create(function(subscriber){
        var fn = function(frameTimestmpInMs){
            subscriber.onNext(frameTimestmpInMs);
            window.requestAnimationFrame(fn)
        };
        window.requestAnimationFrameb(fn);
    });
}

然后我可以在需要动画的各个地方使用它.举个例子,我需要绘制一些动画,直到用户触摸屏幕,我走了

 animationFrameRenderingEventsObservable()
   .takeUntil(touchStartEventObservable)
   .subscribe( animationFunc )

但是,在takeUntil(touchStartEventObservable)结束订阅之后,我需要一种方法来停止animationFrameRenderingEventsObservable中的无限递归.

因此,我将animationFrameRenderingEventsObservable修改为

function animationFrameRenderingEventsObservable(){
    return Rx.Observable.create(function(subscriber){
        var fn = function(frameTimestmpInMs){
            if (!subscriber.isStopped){
                subscriber.onNext(frameTimestmpInMs);
                window.requestAnimationFrame(fn)
            }else{
                subscriber.onCompleted();
            }
        };
        window.requestAnimationFrameb(fn);
    });
}

根据我的测试,代码按预期工作.但是,如果像安德烈提到的那样,使用subscriber.isStopped或类似的方法并不是正确的方法,那么正确的方法是什么？

最佳答案 在您提供给create的函数中,您可以返回一个清理函数,以便在观察者从您的observable取消订阅时调用.您应该提供一个停止动画帧请求的函数.这是一个可行的观察,可以完成我几年前写的你想要的东西：

Rx.Observable.animationFrames = function () {
    /// <summary>
    /// Returns an observable that triggers on every animation frame (see https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame ).
    /// The value that comes through the observable is the time(ms) since the previous frame (or the time since the subscribe call for the first frame)
    /// </summary>
    var request = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame,
        cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame ||
            window.msCancelAnimationFrame || window.msCancelRequestAnimationFrame;

    return Rx.Observable.create(function (observer) {
        var requestId,
            startTime = window.mozAnimationStartTime || Date.now(),
            callback = function (currentTime) {
                // If we have not been disposed, then request the next frame
                if (requestId !== undefined) {
                    requestId = request(callback);
                }

                observer.onNext(Math.max(0, currentTime - startTime));
                startTime = currentTime;
            };

        requestId = request(callback);

        return function () {
            if (requestId !== undefined) {
                var r = requestId;
                requestId = undefined;
                cancel(r);
            }
        };
    });
};

用法：

Rx.Observable.animationFrames().take(5).subscribe(function (msSinceLastFrame) { ... });
点赞