Promises

by sosegon

HTML

<div id='main'>
  <button id='button'>
    Click me!
  </button>

  <span>Promise messages</span>
  
  <div id='messages' />
</div>

CSS

#main {
  display: flex;
  flex-direction: column;
}

JavaScript

const messagesDom = document.getElementById('messages')

const execMessages = () => {
	return new Promise((resolve, reject) => {
  	setTimeout(() => resolve({messages: ['msg1', 'msg2', 'msg3'], counter: 0}), 300);
	})
  .then(({messages, counter}) => resolver1({messages, counter}))
  .then(({messages, counter}) => resolver1({messages, counter}))
  .then(({messages, counter}) => resolver1({messages, counter}))
  .then(({messages, counter}) => resolver1({messages, counter}))
}

const resolver1 = ({messages, counter}) => {
  const p1 = document.createElement('div')
	if (messages.length) {
  	messages.forEach(p => {p1.innerText += ` ${p}`})
  } else {
  	p1.innerText = 'No messages'
  }
  messagesDom.appendChild(p1)

	const c1 = document.createElement('div')
  c1.innerText = `${counter}`
  p1.appendChild(c1)
	  
  return new Promise((resolve, reject) => {
  	setTimeout(() => resolve({messages: messages.slice(1), counter: counter + 1}), 300)
  })
}

const btn = document.getElementById('button')
btn.addEventListener('click', () => {
	let promise = execMessages()
	for (i = 0; i < 10; i++) {
  	promise = promise.then(({messages, counter}) => {
    	return resolver1({messages: messages.length === 0 ? ['m1', 'm2', 'm3'] : messages, counter})
    })
  }
})