Search code examples
javascriptjquerycycle

output all characters and recognize end of js-function

i have put together the undermentioned script. it wont output the last character of the last source. i am not very well concerned with js and that is why i ask you. can anyone give me a clue?

function jtype(source, step){ 

 var str = source, i = 0, isTag, text, all = "", ii = 0, totallength = 0;

 for(ii = 1; ii < step; ii++){
  all = all + $("#source-" + ii).val();
 }

 (function type() {
  text = str.slice(0, ++i);
  if (text === str) return;
  $(".steps").html(all + text);
  var char = text.slice(-1);
  if( char === '<' ) isTag = true;
  if( char === '>' ) isTag = false;
  if (isTag) return type();
  setTimeout(type, 20);
 }());

}

this is an example-data-source:

<input type="hidden" class="sources" id="source-1" value="Gesetzliche Zinsen gebühren kraft Gesetzes. ">
<input type="hidden" class="sources" id="source-2" value="Der gesetzliche Zinssatz beträgt nach <a href=&quot;#&quot; onclick=&quot;dofadein('#norm330')&quot;>§ 1000 Abs 1 ABGB</a> 4 Prozentpunkte pro Jahr. ">
<input type="hidden" class="sources" id="source-3" value="Gesetzliche Zinsen sind insb die sog Verzugszinsen nach <a href=&quot;#&quot; onclick=&quot;dofadein('#norm430')&quot;>§ 1333 ABGB</a>.">

in this example it wont output the dot at the end of #source-3. when i make an alert(source) right in the function jtype() the dot is NOT missing.

the other thing i want to know is. how can i determine the end of the output. i mean: how can i determine if the cycling is finished and the last character has been output?

thank you very much for your help and please excuse my bad english.

Solution

  • The problem seems to be that when the text === str you return before updating the element so the last character never gets inserted

    Change:

    if (text === str) return;
$(".steps").html(all + text);

    To:

    // update element before ending
$(".steps").html(all + text);
if (text === str) return;

    DEMO