Подскажите конструкцию для функции

193

05 апреля 2017, 16:19

Начну с того, что у меня есть функционал для блога.
В нем есть article'ы. Кликаем на article - начинается анимация раскрытия содержимого поста.

Как это происходит по пунктам, если пост скрыт из виду (то есть виден только его заголовок, кликаем по нему, чтобы раскрыть пост):

Скрываем первое
Раскрываем второе
Делаем третье

Если пост уже раскрыт и мы щелкаем на его заголовок, чтобы скрыть его:

Делаем третье
Раскрываем второе
Скрываем первое

То есть делаем то же самое, но просто в другом порядке.
И как я организую js для этого:

if (postOpen)
  // действия, направленные на скрытие поста
else
  // действия, направленные на раскрытие поста

Как можно эти пункты организовать в одной (желательно) функции так, чтобы при её вызове, выполнялись действия сначала с 1-2-3 очередностью, а при повторном вызове - 3-2-1?

Может, промисы использовать? Потому что "пункты" - это анимации, и второй пункт запускается на выполнение тогда, когда завершилась анимация для первого пункта.

Answer 1

//тестовые функции
var func1 = (resolve, x) => setTimeout( resolve, 1000, x + 1 )
var func2 = (resolve, x) => setTimeout( resolve, 1000, x * 3 )
var func3 = (resolve, x) => resolve( x - 2 )
//promisify - берёт функцию и оборачивает ещё в promise, 
//функция должна принимать колбэк от promise в первом параметре
var promisify = f => x => new Promise( (resolve) => f( resolve, x ) )
//композиция функций возвращающих Promise
var composeP = ( f, g )=> x => g( x ).then( f )
// arr:: [ x -> Promise ] --- массив функций от 1 аргумента, возвращающих Pormise
var arr =[func1, func2, func3].map( promisify )
//forward, backward прямой и обратный порядок применения функций
forward = arr.reduce( composeP ) // ((x-2)*3)+1
backward = arr.reverse().reduce( composeP ) // ((x+1)*3)-2
forward( 3 ).then( console.log.bind( console, 'forward = ' ) )
backward( 3 ).then( console.log.bind( console, 'backward = ' ) )

Answer 2

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

new Promise ((resolve, reject) => {
  if (isPostOpen) resolve(); else reject();
})
.then(result => f1(), result => {throw f3()})
.then(result => f2(), result => {throw f2()})
.then(result => f3(), result => {f1()});