Как правильно применять distinctUntilChanged для минимизации операций DOM

Question

Я пытаюсь сделать всплывающее меню с помощью RxJS, вот где я остановился: http://jsbin.com/coqulamamo/1/edit?html,js,output

Я сопоставляется с 2-х основных eventstreams, menuActivation и menuDeactivation:

• menuActivation испускает всплывающий контейнер, когда любой из его детей испускает mouseenter или focusin.
• menuDeactivation испускает последний элемент menuActivation после его первого mouseleave или в следующий раз, когда любой элемент, не относящийся к потомству, испускает focusin.

Для каждого всплывающего контейнера по menuActivation, active класс прилагается; Для каждого из menuDeactivation, класс active удаляется из элемента.

До сих пор так хорошо. Но теперь, как я могу предотвратить слишком много операций DOM? Нет необходимости активировать меню, когда оно уже активно, то же самое относится к деактивации, но я не хочу сохранять состояния в Rx.Subject, может быть любая длина всплывающих меню, распространяемых на странице.

Я попытался .distinctUntilChanged() но когда всплывающее окно контейнера излучается последовательно в menuActivation, а затем в menuDeactivation, в следующий раз, то же всплывающее окно не будет выделяться на menuActivation.

Есть ли способ разрешить всплывающему контейнеру превзойти menuActivation.distinctUntilChanged() после проекта на menuDeactivation?

Answer 1

distinctUntilChanged может работать только на одном наблюдаемом. Чтобы обойти это, вы можете создать наблюдаемое, которое объединяет ваши две наблюдаемые. Что-то вроде

var menuAct2 = menuActivation.map(function(menu) { return { type: "act", menu: menu}; }) 

var menuDeact2 = menuDeactivation.map(function(menu) { return { type: "deact", menu: menu}; }) 

var actDeact = menuAct2.merge(menuDeact2) 
    .distinctUntilChanged(function (a) {return a;}, function (a, b) { 
    return a.menu === b.menu && a.type === b.type; 
}); 

actDeact 
.filter(function (a) { return a.type === "act";}) 
.map(function (a) {return a.menu;}) 
.subscribe(function(menu) { 
    console.log("Focou:", menu); 
    menu.classList.add("MainMenu__ListContainer--Active"); 
}); 

actDeact 
.filter(function (a) { return a.type === "deact";}) 
.map(function (a) {return a.menu;}) 
.subscribe(function(menu) { 
    console.log("Desfocou:", menu); 
    menu.classList.remove("MainMenu__ListContainer--Active"); 
}); 

Вы в основном создать наблюдаемым путем слияния ваших двух наблюдаемых, сделать distinctUntilChanged на том, что наблюдаемое, и разделить его обратно в два наблюдаемыми для использования в остальной части кода.

Извините, если это неправильный javascript, я не слишком хорошо знаком с этим языком.