Форум

JavaScriptProgrammer · #1 (**permalink**) 08.11.2012, 19:51

Имеется написанная пользовательская функция с параметрами. Вызывается два раза в коде. Вызванные функции работают почему-то одновременно. А должны по-очереди.
Как заставить таймер работать по-очереди. Как таймер убрать из памяти.

<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 
                           );       
}

DjDiablo · #2 (**permalink**) 08.11.2012, 20:14

всё правильно, таймеры в 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);
});

JavaScriptProgrammer · #3 (**permalink**) 08.11.2012, 20:23

Объясните код пожалуйста.
В странице предполагается большое количество span-объектов, хотелось бы вызывать пользовательскую функцию с одним параметрам(id, string) без callback.
И каждый раз поочерёдно.

DjDiablo · #4 (**permalink**) 08.11.2012, 20:38

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();

Допили код если я что то гдето забыл, заодно поупражняешся

JavaScriptProgrammer · #5 (**permalink**) 08.11.2012, 20:55

не работает код.

JavaScriptProgrammer · #6 (**permalink**) 08.11.2012, 20:56

плиз сделайте правильный код.

DjDiablo · #7 (**permalink**) 08.11.2012, 21:03

вместо
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>

JavaScriptProgrammer · #8 (**permalink**) 08.11.2012, 21:13

код работает только с 2 div. с div больше 2 он не работает.
как исправить код.

JavaScriptProgrammer · #9 (**permalink**) 08.11.2012, 21:16

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

dmitriymar · #10 (**permalink**) 08.11.2012, 21:23

от я чего то не догоняю. появляются в один день несколько новых ников -предположительно человек и давай темы свои повторно дублировать.
даже после полученных правильных ответов .
ты надеешься, что чудным образом заранее нерабочие алгоритмы твои заработают после дублей?
причём колбеки если таймеры не гарантируют порядок выполнения? избавляйся от таймеров последовательно вызывающихся

Форум

Справочник

Discord чат

Курсы javascript