Йо-йо! Сейчас я занимаюсь разработкой сервиса для массовой проверки редиректа. Часть этого сервиса готова и если вам нужно проверить редирект какой-то страницы, то вы можете воспользоваться инструментом на странице «Проверка редиректа«. Но сейчас не об этом.
У меня была задача — взять список адресов страниц из текстового поля в виде массива и пройтись по нему, сделав запросы на сервер. Самое важное в этой задаче — не пойти по несуществующим элементам и при этом, чтобы было асинхронно. Сейчас я вам расскажу как я решил эту задачу.
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.