Артём Мáлков

Циклический (бесконечный) последовательный вывод элементов массива на JavaScript

29 апр2 комм

При реализации своего рода простого слайдера я задался вопросом о том, как можно циклически (последовательно по кругу) выводить элементы некоторого заданного массива.

Информация, которою я нашел в Интернете, указывала на использование циклов (for или while), но при их использовании даже на небольшом массиве происходила большая нагрузка и зависание браузера.

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

Выглядит все это следующим образом:

var arr_number = [1, 2, 3, 4, 5, 6];
var arr_start = 0; // С какого элемента начинаем обход
var arr_count = arr_number.length - 1; // Количество элементов в массиве

setInterval(function() {
    
	console.log(arr_number[arr_start]); // Выводим элемент массива в консоль разработчика
  
	if(arr_start == arr_count) {
			
		arr_start = 0;
		
	} else {
   
		arr_start++;
			
	}
	
}, 2000);

Принцип работы кода такой: регулярно (на основе этой функции) каждые 2 секунды мы выводим одно значение массива и сдвигаем выборку на 1 вперед. Если сдвиг равняется крайнему значению массива, то сбрасываем значение сдвига и при следующем переобходе начинаем вывод элементов массива с самого начала.

Вроде бы все понятно, и при этом код не грузит работу браузера.

Рекомендуем к просмотру
Находим наибольшее и наименьшее значение массива на PHP/JavaScript
Статьи и советы
Как вывести сообщение в консоль разработчика на JavaScript?
Статьи и советы
Как подсчитать количество одинаковых элементов на странице в jQuery?
Статьи и советы
2
комментария
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 3
    1
      •  Пользователь
    29 июн в 22:40

    спасибо большое! взяла за основу для циклического слайдера, работающего по нажатию на стрелки вперед-назад)

      • 1
      1066
        •  Команда Pandoge
      30 июн в 00:03

      Юлия Юлия, рад, что смогли найти что-то полезное для себя на страницах Pandoge angel

Подняться наверх
«Pandoge» - помощник вебмастера