javascript - 如何处理Netflix视频中的Dragend事件

我有一个Chrome扩展程序，可以对Netflix进行一些基本的自动化操作。我有这条线执行向后或向前跳过:

netflix.cadmium.UiEvents.events.resize[1].scope.events.dragend[trickyIndex].handler(null, {value: 123, pointerEventData: {playing: true}});

当trickyIndex为1时，仅当保持Netflix滑块不变时，它才可以完美地在下工作。如果查看器向前或向后拖动滑块，或使用向前或向后箭头键向后或向前跳过，则下次调用上述行时，它将引发以下两个错误之一:



要么...



所示的第二个错误是迄今为止最常见的错误，但我也看到了第一个错误。

看来他们使用的是RxJS和react-redux的Observable模式。

但是，在查看器移动了滑块(或箭头)之后，如果trickyIndex为0，则上面的行从那时起将可以正常工作。无论再次调用多少次，或者用户是否向后或向前跳过，trickyIndex均为0将始终有效，但是trickyIndex为1时将始终引发上面显示的错误。

如果我从头开始使用trickyIndex从0开始，则会引发错误。只有在用户使用滑块或箭头手动跳过之后，它才能正常工作。

问题:我不知道如何检测用户何时拖动滑块或使用向左/向右箭头键。如果可以检测到，则可以正确设置trickyIndex，我相信它在所有情况下都可以使用。否则我将对更好或更强大的解决方案持开放态度。另一个问题是try / catch根本无法在所示的代码行中起作用。我认为是因为其中包含一个异步处理程序。如果我可以成功捕获该错误，我可以简单地尝试1，然后尝试失败，则尝试0，这可能很好用。但是catch块什么也没捕获，并且异常崩溃一直返回到浏览器。

我还尝试了这种方法，该方法可以完全无错误地运行，但是不执行查找/跳过:

netflix.cadmium.UiEvents.events.resize.forEach(function(resizeItem) {
    if (resizeItem.scope) {
        resizeItem.scope.events.dragend.forEach(function(dragendItem) {
            if (dragendItem.scope) {
                dragendItem.handler(null, {
                    value: 123,
                    pointerEventData: {playing: true}
                });
            }
        });
    }
});

我确认输入了外部foreach，但未输入内部foreach(dragendItem.scope始终为null)。令人费解的是，如果我运行原始行:netflix.cadmium.UiEvents.events.resize[1].scope.events.dragend[trickyIndex].handler(null, {value: 123, pointerEventData: {playing: true}}); －在特定用例中确实可以使用。

有任何想法吗？

最佳答案

Netflix在客户端和服务器端都将extensive use用作observable pattern-您尝试对其事件进行的任何处理都必须考虑到这一点。

在特定情况下，事件变为“及时收集”，然后它们在其间应用收集功能(例如map)。

这种设计模式不会使事件处理程序无处不在(这是其最大的优势之一)，因此您将无法坚持使用它们，您需要挂接到核心观察者或添加自己的观察者。

这意味着使用Rx methods而不是索引，因为随着新事件的发生和旧事件的丢弃，索引将不断变化。

像这样:

netflix.cadmium.UiEvents.events.resize.subscribe(
    // This will repeat every time resize happens
    r => r.scope.events.dragend.subscribe(
        // This will repeat every time dragend happens
        d => d.handler(null, {value: 123, pointerEventData: {playing: true}})
    )
);

Netflix have been quite open about using Rx，我强烈建议您观看他们的视频(他们的用户界面有一个完整的YouTube channel )，如果您打算在此视频上构建任何内容。