Задачка про хождение по массиву. Способ применения 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.