Conversion of recursive functions to asynchronous CPS implementation (JavaScript)

function duplicate_step_through_highlighted (element_jq, target_jq, char_cb) {
 console. log( element_jq);
 var contents = element_jq.contents();
 for (var i = 0; i  // if text node, step
 if (contents[i].nodeType === 3) {
 // insert empty text node
 var new_tn = document.createTextNode('');
 target_jq. append(new_tn);

 // iterate it 
 var text = contents[i].nodeValue;
 for (var j = 0; j  char_cb(text[j],new_tn);
 new_tn.nodeValue += text[j];
 // *** I want an async delay here *** 
 }
} else {// type should be 1: element
 // target_jq gets a duplicate element inse rted, copying attrs
 var new_elem = $(contents[i].cloneNode(false)).appendTo(target_jq);
 duplicate_step_through_highlighted($(contents[i]),$(new_elem),char_cb) ;

 // then a recursive call is performed on the newly created element as target_jq
 // and the existing one as element_jq. char_cb is passed in
 }
 }
 }

function animate(elements , callback) {
/* get: array with hidden elements to be displayes, callback function */
 var i = 0;
 (function iterate() {
 if (i  elements[i].style.display = "block"; // show
 animateNode(elements[i], iterate); 
 i++;
 } else if (callback)
 callback();
 })();
 function animateNode(element, callback) {
 var pieces = [];
 if (element.nodeType==1) {
 while (element.hasChildNodes())
 pieces.push(element.removeChild(element.firstChild));
 setTimeout(function childStep() { 
 i f (pieces.length) {
 animateNode(pieces[0], childStep); 
 element.appendChild(pieces.shift());
} else
 callback(); 
 }, 1000/60);
} else if (element.nodeType==3) {
 pieces = element.data.match(/.{0,2}/g); // 2: Number of chars per frame
 element.data = "";
 (function addText(){
 element.data += pieces.shift();
 setTimeout (pieces.length
? addText
: callback,
 1000/60);
 })();
 }
 }
} 

animate($("#foo").children());

This is my function.

function duplicate_step_through_highlighted (element_jq, target_jq, char_cb) {
 console.log( element_jq);
 var contents = element_jq.contents();
 for (var i = 0; i  // if text node, step
 if (contents[i].nodeType === 3) {
 // insert empty text node
 var new_tn = document.createTextNode('');
 target_jq.append(new_tn);

 // iterate it 
 var text = contents[i].nodeValue;
 for (var j = 0; j  char_cb(text[j],new_tn);
 new_tn.nodeValue += text[j];
 // *** I want an async delay here *** 
 }
} else {// type should be 1: element
 // target_jq gets a duplicate element inserted, copying attrs< br /> var new_elem = $(contents[i].cloneNode(false)).appendTo(target_jq);
 duplicate_step_through_highlighted($(contents[i]),$(new_elem),char_cb);
 
 // then a recursive call is performed on the newly created element as target_jq
 // and the existing one as element_jq. char_cb is passed in
 }
 }
 }

What I am doing is to rebuild HTML elements by rebuilding one character at a time. There are good reasons for this, and I hope its visual effect can be “input”.

So There is no delay now, so my elements are repeated immediately. I have checked whether the results are consistent, but I am well aware that I may need to completely rewrite the function to be able to enter an asynchronous delay after inserting each character.

Do I need to rewrite it and have a stack to keep track of where I am in the element?

You may want to take a look at my recent answer or this older one (Demo) to learn how to achieve such an effect.

< p>Tip: Don’t clone elements into new elements, just hide them and make them displayed in sections.

In addition, apart from native DOM elements, jQuery instances should not be processed at all. So, yes, rewriting may:-)I think it does require a stack.

function animate(elements, callback) {
/* get: array with hidden elements to be displayes, callback function */
 var i = 0;
 (function iterate() {
 if (i  elements[ i].style.display = "block"; // show
 animateNode(elements[i], iterate); 
 i++;
} else if (callback)
 callback( );
 })();
 function animateNode(element, callback) {
 var pieces = [];
 if (element.nodeType==1) {
 while (element.hasChildNodes())
 pieces.push(element.removeChild(element.firstChild));
 setTimeout(function childStep() {
 if (pieces.length) {< br /> animateNode(p ieces[0], childStep); 
 element.appendChild(pieces.shift());
} else
 callback();
 }, 1000/60);
} else if (element.nodeType==3) {
 pieces = element.data.match(/.{0,2}/g); // 2: Number of chars per frame
 element.data = "";
 (function addText(){
 element.data += pieces.shift();
 setTimeout(pieces.length
? addText
: callback,
 1000/60);
 })();
 }
 }
}

animate($(" #foo").children());

Demo at jsfiddle.net

How does this work:

> The addText function adds some to the current text node Character, and set a timeout for itself-animation! If everything is done, it will call the callback function.> childStep runs the animation on the child node and passes itself as a callback until there are no child nodes left-then nvokes callback function.> Together, animateNode recursively in the node tree Run on and animate the text nodes in order. The iterate function calls animateNode on all input elements by passing itself as a callback (after canceling them). After all input elements are completed, it will call an external callback, which is the callback It is given as the second parameter of the animation.