Задачка про хождение по массиву. Способ применения array.shift() JS

Йо-йо! Сейчас я занимаюсь разработкой сервиса для массовой проверки редиректа. Часть этого сервиса готова и если вам нужно проверить редирект какой-то страницы, то вы можете воспользоваться инструментом на странице «Проверка редиректа«. Но сейчас не об этом.

У меня была задача — взять список адресов страниц из текстового поля в виде массива и пройтись по нему, сделав запросы на сервер. Самое важное в этой задаче — не пойти по несуществующим элементам и при этом, чтобы было асинхронно. Сейчас я вам расскажу как я решил эту задачу.

TL;DR
строка из textarea разбивается на массив с помощью «строка».split(‘\n’); «\n» — перенос строки.
array.shift() — удаляет элемент массива и возвращает его.

Подготовка

Конечно же нам нужно сделать текстовое поле, в которое будем вставлять ссылки и надо сделать кнопок. Делаем

<textarea id="area" class="area"></textarea>
<button id="get">Get</button>

Плюс я добавлю стиль, чтобы текстовое поле было на всю ширину. Так оно будет лучше смотреться.

.area {display: block; width:100%; height:80vh;}

Получение массива

Я предполагаю, что пользователь будет вводить каждый адрес в новую строку. Поэтому мне нужно будет делить текст из textarea по переносу строки. Это можно сделать с помощью метода split.

// Находим наши элементы (кнопку и textarea)
const get = document.getElementById('get');
const area = document.getElementById('area');
get.addEventListener('click', ()=>{
  // Здесь мы получаем наш массив
  let arrUrls = area.value.split('\n');
});

В итоге я получил массив адресов

Имитация асинхронности

Т.к. я не хочу демонстрировать реальный пример, я покажу на примере с setInterval. Мы пройдёмся по массиву и «очистим» интервал.

const get = document.getElementById('get');
const area = document.getElementById('area');
get.addEventListener('click', ()=>{
  let arrUrls = area.value.split('\n');
  const interval = setInterval(()=>{
      // Удаляю из массива элемент и возвращаю в переменную
      let u = arrUrls.shift();
      // Печатаю в консоль адрес с задержкой в 200мс
      console.log(u);
    
      // Проверяю длину массива и если она равна 0 то удаляю интервал
      if(arrUrls.length === 0){ 
        clearInterval(interval);
      }
   }, 200);
});

В реальном случае я использовал fetch и он мне печатал результат сразу на страницу.

Результат

Примерно у вас получиться вот это

See the Pen Array_pusher_popper by xakplant (@xakplant) on CodePen.