Здравствуйте,
у меня к вам такой вопрос. Пишу скрипт для циклического отображения данных на странице из файла JSON и вставляю их с помощью двух функций. В первой использую цикл для прохода по всем элементам json файла а так же вызываю ее же в качестве рекурсии для цикличного прохода. Во второй добавляю 5 ненумерованных списков на страницу с тремя значениями. а также удаляю первый из низ для создания анимации (прогона элементов снизу вверх). Проблема в следующем:
Скрипт начинает есть много ресурсов как процессора так и памяти и как я понял функция .remove() не очищает память за собой. Скажите как можно изменить этот цикл или произвести очистку памяти после вывода 5 элементов списка не убивая сам цикл. Требуется чтобы данные циклично отображались. Функция остановки которую я установил на нажатие кнопки делает паузу но не останавливает цикл и так же не очищает память (как лучше поступить с функцией паузы цикла?)
Сам скрипт:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Viacheslav" />
<script src="js/jquery-1.7.1.min.js"></script>
<title>JSON TEST-1</title>
</head>
<body>
<div id="content_div">
<ul></ul>
</div>
<input type=button value="pause/play" onclick="continue_reporting = ( continue_reporting == 1 ) ? 0 : 1;">
<script type="text/javascript">
var counter = 0;
var delay_entry = 0;
delay_fetch = 0;
var continue_reporting = 1;
var node_list = new Array( );
//var content_div = $("#content_div");
var child = 0;
fetch_data(); // initial run
function fetch_data()
{
$.getJSON('js/list.json?i=' + Math.random(), function(data){
//console.log("data.length: " + data.length );
$.each(data, function(key,value){
counter++
setTimeout( pusher, 1000 * delay_entry, value );
delay_entry++;
})
})
setTimeout( fetch_data, 1000 * delay_fetch );
delay_fetch++;
}
function pusher( value )
{
if ( continue_reporting == 1 )
{
$("#content_div").append("<ul>" +
"<li>" + value.reg + "</li>" +
"<li>" + value.bids[0].ind + "</li>" +
"<li>" + value.bids[0].v + "</li>" +
"</ul>");
child++;
if (child > 4){
$("#content_div ul:first-child").remove();
}
}
console.log("children = " + child);
}
</script>
</body>
</html>