когда нечего делать, а творческая душа требует реализации и хочется что-то сделать или написать, то я пишу сюда или делаю что-то на этом сайте. Кому интересна web-разработка, wordpress и то что рядом с этим, то заходите на мой сайт и читайте всякое...
Задачка про хождение по массиву. Способ применения array.shift() JS
Йо-йо! Сейчас я занимаюсь разработкой сервиса для массовой проверки редиректа. Часть этого сервиса готова и если вам нужно проверить редирект какой-то страницы то вы можете воспользоваться инструментом на странице «Проверка редиректа«. Но сейчас не об этом.
У меня была задача — взять список адресов страниц из текстового поля в виде массива и пройтись по нему, сделав запросы на сервер. Самое важное в этой задаче не пойти по несуществующим элементам и при этом, чтобы это было асинхронно. Сейчас я вам расскажу как я решил эту задачу.
TL;DR строка из textarea разбивается на массив с помощью «строка».split(‘\n’); «\n» — перенос строки. array.shift() — удаляет элемент массива и возвращает его.
Подготовка
Конечно же нам нужно сделать наше текстовое поле в которое будем вставлять ссылки и нужно сделать кнопок. Делаем
Плюс я добавлю стиль, чтобы текстовое поле было на всю ширину. Так оно будет лучше смотреться
.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 и он мне печатал результат сразу на страницу.
Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.