Печатающийся текст на экране (Javascript)

Раньше этот скрипт стоял на этом сайте, но однажды я решил его убрать. Не потому что он плохо работал, а потому что, по некоторым соображениям, я посчитал его лишним. Но чтобы скрипт сохранился, я решил создать этот пост. Велика вероятность, что он мне еще пригодится.

Скрипт ниже имитирует печатание заголовков статей на экране в виде ссылки на саму статью. Заголовки указываются в скрипте и также указываются УРЛы к ним. Скрипт создает ссылки из переданных данных и печатает ссылки в одной строке поочередно.

А это код скрипта:

Рекомендую: <a id="Ticker" href="http://example.com/default_link">Здесь можно вписать дефолтную ссылку.</a>

<script>
autotypingText( {
	typingSpeed: 50,       // скорость печатания
	switchTimeout: 2000,   // время ожидания перед переключением между элементами
	element: document.getElementById( 'Ticker' ),
	data: [
		{
			text: 'Плагин Webmaster Yandex для WordPress',
			url: 'http://wp-kama.ru/4015'
		},
		{
			text: 'Kama Thumbnail: плагин WordPress для создание картинок-миниатюр записи',
			url: 'http://wp-kama.ru/142'
		},
		{
			text: 'Настраиваем robots.txt для WordPress',
			url: 'http://wp-kama.ru/id_803/pishem-pravilnyiy-robotstxt-dlya-wordpress.html'
		},
		{
			text: 'WP-Cumulus: 3D облако меток на flash (улучшенная русская версия)',
			url: 'http://wp-kama.ru/4271'
		},
		{
			text: 'Плагин для защиты от спама в комментариях WordPress',
			url: 'http://wp-kama.ru/95'
		},
		{
			text: 'Плагин для легкого управления сайтом на WordPress (версия 3)',
			url: 'http://wp-kama.ru/note/plagin-dlya-legkogo-upravleniya-saytom-na-wordpress-versiya-3'
		},
		{
			text: 'Автоматическое растягивание textarea на javascript и jQuery',
			url: 'http://wp-kama.ru/112'
		},
	],
} )

/**
 * Печатание текста - Тиккер
 * @param {object} args
 */
function autotypingText( args ){

	let itemCount = Number( args.data.length );
	let curItemIndex = -1;
	let currentLength = 0;
	let theText = '';

	runTheTicker();

	function runTheTicker(){
		let theHold

		// Переход к следующему элементу
		if( currentLength === 0 ){
			curItemIndex++;
			curItemIndex = curItemIndex % itemCount;
			theText = args.data[curItemIndex].text.replace( /"/g, '-' );
			args.element.href = args.data[curItemIndex].url;
		}

		// Располагаем текущий текст в анкор с печатанием
		args.element.innerHTML = theText.substring( 0, currentLength ) + znak();

		// Преобразуем длину для подстроки и определяем таймер
		if( currentLength !== theText.length ){
			currentLength++;
			theHold = args.typingSpeed;
		}
		else{
			currentLength = 0;
			theHold = args.switchTimeout;
		}

		// Повторяем цикл с учетом задержки
		setTimeout( runTheTicker, theHold );
	}

	function znak(){
		return ( currentLength === theText.length ) ? '' : '|';
	}

}
</script>

Данные

Можно получать динамичестки в WordPress. Допустим, можно получать записи с произвольным полем "Рекомендую" и вывести их в нужном формате. Для WordPress код будет таким:

<?php
$query = new WP_Query( 'meta_key=my_recommended' );
$data = [];

while( $query->have_posts() ){
	$query->the_post();

	$data[] = [
		'text' => get_the_title(),
		'url' => get_permalink()
	];
}

wp_reset_query();

$dataJsObject = json_encode( $data, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT );

?>
<script>
autotypingText( {
	typingSpeed: 50,       // скорость печатания
	switchTimeout: 2000,   // время ожидания перед переключением между элементами
	element: document.getElementById( 'Ticker' ),
	data: <?= $dataJsObject ?>,
} );
</script>

Просто печатающийся текст

Раз уж речь зашла о печатании текста на экране, то наверное правильно было бы привести пример простого печатания обычного или необычного текста, тут уж от автора зависит. Как и до этого: сначала пример, а затем код:

<div id="my-text">
Этот текст печатается сам. И не важно, что вы не смотрите на него или даже не
смотрите вообще куда-либо. Он будет продолжать печататься со стабильной скоростью:
одна буква / 50 милесекунд. <br><br>

Как видите, можно напечатать даже переносы строк. <br><br>

В прочем это не печатание, а вывод уже готового текста в стиле печатной машинки -
это интересно и иногда привлекает читателей, поэтому возьмите на вооружение этот
скрип. К тому же, он ну очень прост.
</div>

<script>
// init
printText( document.getElementById( 'my-text' ) );

function printText( el ){

	let letterTimeout = 20

	let text = el.innerHTML
	let i = 1

	print__fn() // init

	function print__fn(){

		if( i <= text.length ){
			el.innerHTML = text.substr( 0, i );
			setTimeout( arguments.callee, letterTimeout );
		}

		i++;
	}

}
</script>