<button id="request">Get random animals</button>
<br/>
<img id="cat"/>
<img id="dog"/>
<img id="fish"/>

window.CP.PenTimer.MAX_TIME_IN_LOOP_WO_EXIT = 60000;

function findRandomImgPromise(tag) {
  const apiKey = 'a89c66e48519481ab448a3f8356e635c';
  const endpoint = `https://api.giphy.com/v1/gifs/random?api_key=${apiKey}&tag=${tag}`;
  return fetch(endpoint)
    .then(rs => rs.json())
    .then(data => data.data.fixed_width_small_url);
}

function setTimeoutPromise(time) {
  return new Promise((resolve) => {
    setTimeout(resolve, time);
  });
}

$('#request').click(async () => {
  // Asynchonous + Sequential
  console.log('Begin run');
  const firstLoop = randomImg('dog');
  console.log('Dog run');
  const secondLoop = randomImg('cat');
  console.log('Cat run');
  
  await Promise.all([firstLoop, secondLoop]);
  alert('All loop finished.');
});

async function randomImg(tag) {
  for(let i = 0; i < 5; i++) {
    const imgUrl = await findRandomImgPromise(tag);
    $('#' + tag).attr('src', imgUrl);
    await setTimeoutPromise(2*1000);
  }
}