Как таймер заставить работать поочерёдно вызываю одну и ту же функцию два раза?
Имеется написанная пользовательская функция с параметрами. Вызывается два раза в коде. Вызванные функции работают почему-то одновременно. А должны по-очереди.
Как заставить таймер работать по-очереди. Как таймер убрать из памяти.
<html>
<title></title>
<head>
<span id="span1"></span>
<br></br>
<span id="span2"></span>
</head>
<body>
<script src="script.js"></script>
<script>
printContent("span1", str1);
printContent("span2", str2);
//document.getElementById("span1").style.width = document.body.clientWidth;
</script>
</body>
</html>
var str1 = "Text1";
var str2 = "Text2";
function printContent(id, string){
var element = document.getElementById(id);
var counter = 0;
var interval = window.setInterval(
function(){
element.innerHTML += string[counter++];
if(counter == string.length){
window.clearInterval(interval);
}
},
50
);
}
|
всё правильно, таймеры в js работают именно так.
первое и самое простое что приходит в голову.
var str1 = "Text1";
var str2 = "Text2";
function printContent(id, string, callback){
var element = document.getElementById(id);
var counter = 0;
var interval = window.setInterval( function(){
element.innerHTML += string[counter++];
if(counter == string.length){
window.clearInterval(interval);
if (typeof callback!='undefined') callback();
}
}, 50 );
}
printContent("span1", str1,function(){
printContent("span2", str2);
});
|
Объясните код пожалуйста.
В странице предполагается большое количество span-объектов, хотелось бы вызывать пользовательскую функцию с одним параметрам(id, string) без callback. И каждый раз поочерёдно. |
function teletayper(){
var teleStack=[];
function add (id,str){
teleStack.push({id:id, str:str })
};
function play (){
var param=teleStack.shift();
if (typeof param!='indefined') printContent(param.id,param.str);
}
function printContent(id, string){
var element = document.getElementById(id);
var counter = 0;
var interval = window.setInterval( function(){
element.innerHTML += string[counter++];
if(counter == string.length){
window.clearInterval(interval);
play ();
}
}, 50 );
}
return {
add:add,
play:play
};
}
var t=teletayper();
t.add('bla', 'bla bla');
t.add('bla2', 'bla bla2');
t.add('bla', 'bla bla');
t.play();
Допили код если я что то гдето забыл, заодно поупражняешся :) |
не работает код.
|
плиз сделайте правильный код.
|
вместо
if (typeof param!='indefined') printContent(param.id,param); нужно if (typeof param!='indefined') printContent(param.id,param.str); опечатка. :)
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<div id="x"></div>
<div id="y"></div>
<script>
function teletayper(){
var teleStack=[];
function add (id,str){
teleStack.push({id:id, str:str })
};
function play (){
var param=teleStack.shift();
if (typeof param!='indefined') printContent(param.id,param.str);
}
function printContent(id, string){
var element = document.getElementById(id);
var counter = 0;
var interval = window.setInterval( function(){
element.innerHTML += string[counter++];
if(counter == string.length){
window.clearInterval(interval);
play ();
}
}, 50 );
}
return {
add:add,
play:play
};
}
t=teletayper();
t.add('x','hello');
t.add('y','hello 2222222');
t.play();
</script>
</body>
</html>
|
код работает только с 2 div. с div больше 2 он не работает.
как исправить код. |
нет работает. а как объяснить код. как можно всё это написать проще. без ооп. как было раньше одно значение хранилась в памяти, потом другое и т.д.
|
от я чего то не догоняю. появляются в один день несколько новых ников -предположительно человек и давай темы свои повторно дублировать.
даже после полученных правильных ответов . ты надеешься, что чудным образом заранее нерабочие алгоритмы твои заработают после дублей? причём колбеки если таймеры не гарантируют порядок выполнения? избавляйся от таймеров последовательно вызывающихся |
| Часовой пояс GMT +3, время: 10:36. |