Javascript-форум - Бегущая строка для всех браузеров

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Бегущая строка для всех браузеров (https://javascript.ru/forum/dom-window/10771-begushhaya-stroka-dlya-vsekh-brauzerov.html)

Бегущая строка для всех браузеров

Цель - написать бегущую строку на JvScr, но чтобы она прокручивалась плавно, а не по буквам (ну надо по работе), поэтому большинство скриптов и простых (да и сложных) решений не подходят.
Также нужно чтобы строка была зациклена.

Нашел ~~это~~(этот скрипт похож, но источник был другой, сейчас не могу найти). Но прилагаемый пример работает только в Опере и IE. В ФФ и Chrome он не работает. После небольшой модификации, он стал работать, но дико тормозить.

Причем, в Опере скрипт грузит проц на 0%, после запуска Хрома, скрипт начинает грузить проц на 25%:blink:
Утечек памяти вроде нет, есть утечка процессорного времени.

Очень хотелось бы знать почему это вообще происходит?! Ну и как это устранить, конечно)

stop=false;
function anistop() {stop=true}
function anirun()  {stop=false}

function start() {
	var oContainer = document.getElementById('anic');
	var oText = document.getElementById('ani');
	var oText1 = document.getElementById('ani1');
	var nWidth = -oText.offsetWidth;
	var nPos = 0;
	
	function OnTimer() {
		oText.style.left = oText1.style.left = nPos + 'px';
		if (!stop && nPos-- < nWidth)
			nPos = 0;
	}
	window.setInterval(OnTimer, 20);
}
window.onload = start;

<div id="anic" onmouseover="anistop()" onmouseout="anirun()">
	<pre id="ani">Много текста Много текста Много текста </pre><pre id="ani1">Много текста Много текста Много текста </pre>
</div>

#anic {
	position:relative;
	padding:0px;
	width:100%; height:100%;
	overflow:hidden;
}
	#ani, #ani1 {
		display:inline;
		position:relative;
	}

Понятно что я где-то что-то не удаляю, но где не могу найти. Я недавно начал в JvScr писать, тонкостей еще не знаю.

да, если несколько раз запускать скрипт в ФФ он и в Опере начинает грузить проц на 100%, причем грузит именно часть с перемещением (nPos--) или (--nPos), при наведении (строка останавливается) загрузка те самые 25%.

Выяснил что тормозит во время перемещения, везде. Как будто браузеры не успевают перерисовывать страницу. Если открыть панель разработчика и увеличить ее почти до бегущей строки, то тормоза сходят на нет.
В хроме они иногда даже пропадают и после закрытия панели, правда до обновления страницы.

Может есть какие-нибудь рекомендации по быстрому изменению содержания?

setInterval останавливать надо при наведении на строку и width:100%; сделать фиксированным
что - то вроде такого :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
<style type="text/css">
#anic {
	position:relative;
	padding:0px;
	width:200px; height:100%;
	overflow:hidden;
    background-color: #FFEBCD;
}
	#ani, #ani1 {
		display:inline;
		position:relative;
	}
</style>
<script language="JavaScript" type="text/javascript">
var timer, nPos = 0,
    stop = false;

function anistop() {
    stop = true
}
function anirun() {
    start()
}
function start() {
    stop = false;
    timer && window.clearInterval(timer);
    document.getElementById("anic");
    var a = document.getElementById("ani"),
        b = document.getElementById("ani1"),
        c = a.offsetWidth;
    timer = setTimeout(function () {
        a.style.left = b.style.left = nPos + "px";
        nPos -= 2;
        if (nPos < -c) nPos = 0;
        stop || setTimeout(arguments.callee, 25)
    }, 10)
}
window.onload = start;
</script>
</head>
<body>
<div id="anic" onmouseover="anistop()" onmouseout="anirun()">
<pre id="ani">Много текста Много текста Много текста </pre><pre id="ani1">Много текста Много текста Много текста </pre>
</div>
</body>
</html>

рони, спасибо! Даже жесткое задание высоты для контейнера #anic позволило Хрому заработать нормально (25% загрузки)!
Теперь остался ФФ, сейчас попробую пример.

запустил в чистом документе - работают оба кода, с примерно одинаковой производительностью. Добавление стилей и тегов увеличивает потребление ресурсов ~вдвое, но на приемлемом уровне.

В проекте в ФФ тормозит, черт
upd: видимо просто большую страницу перерисовывает намного дольше тестовой

Странно, но ширина почти не влияет на производительность. ФФ перестает тормозить при интервале 300мс (

Вопрос по коду: зачем нужен timer && window.clearInterval(timer); и timer = setTimeout( ?

переписал так:

var timer, nPos = 0;

function anistop() {stop = true}
function anirun() {start()}

function start() {
    stop = false;
    var a = document.getElementById('ani'),
        w = -a.offsetWidth/2;
   (function () {
        a.style.left=nPos+'px';
		nPos -= 3;
        if (nPos < w) nPos = 0;
        stop || setTimeout(arguments.callee, 300)
    })()
}
window.onload = start;

производительность вроде такая же или чуть-чуть больше, но все равно в ФФ она нулевая

Я бы ещё на твоём месте объявил переменную a глобально.
А то она у тебя при каждом изменении таймера объявляется.
Для этого вынеси её за пределы function в начало скрипта

NixCore, переменная а (которая "содержит" перемещаемый элемент) объявлена в функции start(), а вызывается по таймеру функция function () (без названия).

А объявить а глобально вроде нельзя (или там надо переменную передавать) короче много труда, а в производительности выигрыша не будет - функция start() отрабатывает только один раз