JS — как анимировать изменения массива/объекта?

Question

[anderysen]

Подскажите как правильно сделать (или может есть готовое решение) анимацию изменений в массиве данных, нужно в русле создания биржевого виджета (order book).


Необходимо:
1) отобразить массив данных;
2) при приходе нового массива смержить их, а изменения значений/добавления/удаления позиций анимировать.
Пример:
https://bitcoinwisdom.com/markets/btce/btcusd
правый верхний угол :)

Очередной велосипед писать не очень хочется, гугл тоже не помог, может вы направите на путь истинный.
Спасибо за время и внимание

Answer 1

[Дмитрий Сурин]

Каждая строчка - div. При наступлении события удаления div делает fadeOut. Далее удаляется элемент DOM. По аналогии делается вставка.
К сожалению, хорошего примера найти не могу, но кажется видел что-то по теме на codepen.io

Comments

[anderysen]

это понятно div добавляем прячем, вопрос в том как организовать оптимизированный алгоритм сравнения. как оптимально из старого удалить строку если в новом её нет, обвешивать всё data-attr каким-либо, либо просто бегать по значениям. как оптимально находить место куда вставлять строку. всё с условием что данные могут приходить через 300мс и массивы по 200+ элементов.

[Дмитрий Сурин]

Да, все верно, это самый просто вариант. Каждый див имеет какой-то data атрибут, например "data-rub-price-id=27", по которому вся работа и будет производиться. В идеале с сервера должны приходить только изменения, а не массив 200+ элементов. Если такой возможности нет, то наврядли можно будет сделать замену не пройдя пришедший массив хотя бы раз. К сожалению, готового решения не встречал, придется Вам написать самому.

[anderysen]

спасибо обнадёжили :) уже написано и работает кое-как :)