재귀 함수를 비동기 CPS 구현으로 변환 (자바 스크립트)

Question

다음은 필자의 기능입니다.

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 < contents.length; ++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 < text.length; 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 
       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 
      } 
     } 
    } 

내가하고있는 일은 한 번에 한 문자 씩 재구성하여 HTML 요소를 다시 작성하는 것입니다. 이 작업을 수행해야하는 좋은 이유가 있습니다. 시각적 효과를 "입력"하고 싶습니다.

지금은 지연이 없으므로 내 요소가 즉시 복제됩니다. 그 결과가 일관성이 있는지 확인했지만 각 문자를 삽입 한 후에 비동기 지연을 넣을 수 있도록 기능을 완전히 다시 작성해야 할 필요가 있음을 분명히 알게되었습니다.

요소를 다시 작성해야하고 요소 내에서 내 위치를 추적 할 스택이 있어야합니까?

Answer 1

이러한 효과를 구현하는 방법에 대한 최신 answer 또는 this older one (Demo)을보고 싶을 수 있습니다.

---

팁 : 요소를 새로운 요소로 복제하지 말고 숨기고 파트별로 표시하십시오.

또한 DOM 요소를 제외하고는 jQuery 인스턴스를 다루지 않는 것이 더 쉽습니다. 그래서 예, 재 작성은 다음을 할 수 있습니다 :-) 그리고 나는 스택이 필요하다고 생각합니다.

• addText 함수는 현재 텍스트 노드에 일부 문자를 추가하고 자체에 대한 시간 제한을 설정 - 애니메이션 :

  function animate(elements, callback) { 
  /* get: array with hidden elements to be displayes, callback function */ 
      var i = 0; 
      (function iterate() { 
       if (i < elements.length) { 
        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) { 
          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()); 
  

  Demo at jsfiddle.net

  그것은 작동하는 방법! 모든 작업이 완료되면 callback 함수가 호출됩니다.

• childStep은 자식 노드에서 애니메이션을 실행하고 자식이 남지 않을 때까지 콜백으로 전달하고 callback 함수를 사용합니다.
• 둘 다 animateNode은 노드 트리를 반복적으로 실행하고 텍스트 노드를 그 순서대로 움직입니다.
• iterate 함수는 콜백으로 전달하여 모든 입력 요소에 animateNode (이후에 그것들을 해체 한 후)을 호출합니다. 모든 입력 요소가 끝나면 animate의 두 번째 인수로 주어진 외부 callback을 호출합니다.

Answer 2

내 웹 사이트에서 사용할 간단한 스크립트를 만들었으므로이 효과를 얻으려는 사람들에게 도움이 될 수 있습니다.

class Typer { 

    constructor(typingSpeed, content, output) { 

     this.typingSpeed = typingSpeed; 
     // Parses a NodeList to a series of chained promises 
     this.parseHtml(Array.from(content), output); 
    }; 

    makePromise(node, output) { 

     if (node.nodeType == 1) // element 
     { 
      // When a new html tag is detected, append it to the document 
      return new Promise((resolve) => { 
       var tag = $(node.outerHTML.replace(node.innerHTML, "")); 
       tag.appendTo(output); 
       resolve(tag); 
      }); 

     } else if (node.nodeType == 3) // text 
     { 
      // When text is detected, create a promise that appends a character 
      // and sleeps for a while before adding the next one, and so on... 
      return this.type(node, output, 0); 
     } else { 
      console.warn("Unknown node type"); 
     } 
    } 

    parseHtml(nodes, output) { 
     return nodes.reduce((previous, current) => previous 
      .then(() => this.makePromise(current, output) 
       .then((output) => this.parseHtml(Array.from(current.childNodes), output))), Promise.resolve()); 
    } 

    type(node, output, textPosition) { 
     var textIncrement = textPosition + 1; 

     var substring = node.data.substring(textPosition, textIncrement); 

     if (substring !== "") { 
      return new Promise(resolve => setTimeout(resolve, this.typingSpeed)) 
       .then(() => output.append(substring)) 
       .then(() => this.type(node, output, textIncrement)); 
     } 

     return Promise.resolve(output); 
    } 
}