Javascript：map 异步 function 在数组上，在每个元素上保持执行，直到它返回前一个元素

Question

I am trying to build a flashcard app, and I have two things: an array with data about each flashcard and an asynchronous function that takes in an element of the array and displays the flashcard to the user. As soon as the function is executed, the card is drawn on the screen.

// not actual code, do not debug

const flashcards = [card1, card2, card3] // except way more cards

function showCard(card){
    // immediately draws the card
    // waits for user interaction
    // returns a value when the user is done with the card
}

I want to loop over the cards in order, but I want only one card to show at a time. The problem is if I do this:

// not actual code, do not debug

flashcards.forEach((item) => {
    showCard(item)
})

...since the function is asynchronous, the browser displays all the flashcards at once, and they get all cluttered and unusable on the screen.

How can I loop over the cards in such a way that each card is drawn only after the user is done interacting with the previous card (ie, when showCard returns)?

Answer 1

I don't think you're looking for an async solution but instead a flag to wait for user interaction.

Something like:

let currentCardIndex = 0;

while (currentCardIndex < flashcards.length) {

    showCard(flashcards[currentCardIndex]);
    currentCardIndex++;
}

Answer 2

There are different approaches here you could either:

1. Spawn a promise and wait for a return value from using thenable semantics.
2. Pass a callback too which call with the return value when the user is done with UI
3. Event emitter to emit that a card has been processed with a return value.

Promise

Pseudocode for promise based solution

let aCardIsVisible = false
function onShowFlashcardHandler (cardId) {
  // a card is already visible return
  if (aCardIsVisible) {
    return
  }

  const card = flashcards.find(card => card.id === cardId)
  if (card) {
    // toggle on flag
    aCardIsVisible = true
    showCard(card)
     .then(value => {
       // do something with return value
  
       // toggle off flag
       aCardIsVisible = false
     })
  }
}


function showCard (card) {
  return new Promise((resolve) => {
    // draw card 
    // on some UI input or timeout loop for checking UI changes
    loop :=
      if UI done then
        value <- UI input value
        resolve(value)
      end
    endloop
  })
}

Callback

Pseudocode for callback based solution

let aCardIsVisible = false
function onShowFlashcardHandler (cardId) {
  // a card is already visible return
  if (aCardIsVisible) {
    return
  }

  const card = flashcards.find(card => card.id === cardId)
  if (card) {
    // toggle on flag
    aCardIsVisible = true
    showCard(card, (value) => {
       // do something with return value
  
       // toggle off flag
       aCardIsVisible = false
    })
  }
}


function showCard (card, callback) {
  // draw card 
  // on some UI input or timeout loop for checking UI changes
  loop :=
    if UI done then
      value <- UI input value
      callback(value)
    end
  endloop
}

Event emitter or Custom Events

Pseudocode for event emitter or custom events based solution This assumes you either use a event emitter or custom events

let aCardIsVisible = false
function onShowFlashcardHandler (cardId) {
  // a card is already visible return
  if (aCardIsVisible) {
    return
  }

  const card = flashcards.find(card => card.id === cardId)
  if (card) {
    // toggle on flag
    aCardIsVisible = true
    showCard(card)
    
  }
}

function onCardDone (value) {
  // do something with return value
  
  // toggle off flag
  aCardIsVisible = false
}


function showCard (card) {
  // draw card 
  // on some UI input or timeout loop for checking UI changes
  loop :=
    if UI done then
      value <- UI input value
      emitter.emit('cardDone', value) // event emitter
      element.dispatchEvent('cardDone', value) // custom event
    end
  endloop
}