将递归函数转换为异步CPS实现(javascript)
将递归函数转换为异步CPS实现(javascript)
提问于 2012-07-26 16:40:32
这是我的函数。
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元素。有一个很好的理由这样做，我希望它的视觉效果得到“键入”。
所以现在没有延迟，所以我的元素会立即被复制。我已经检查了结果是一致的，但我越来越清楚，我可能需要完全重写功能，以便能够在插入每个字符后插入异步延迟。
我是否需要重写它，并有一个堆栈来跟踪我在元素中的位置？
回答 2
Stack Overflow用户
发布于 2018-10-20 02:42:19
这是我的解决方案，它是一种更有效、更干净、更快的方法：
var start = 0; //Makes sure you start from the very beggining of the paragraph.
var text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra sem dolor, nec tempor purus luctus vitae. Nulla massa metus, iaculis et orci euismod, faucibus fringilla metus. Sed pellentesque in libero nec.'; //Your text
var speed = 14; //Of course you can choose your own speed, 0 = instant, the more you add the slower it gets.
function typeWriter() {
if (start < text.length) {
document.querySelector('.demo').innerHTML += text.charAt(start);
start++;
}
setTimeout(typeWriter, speed);
}<body onload="typeWriter();">
<p class="demo"></p>
</body>
Stack Overflow用户
发布于 2017-02-09 20:47:26
我做了一个简单的脚本在我的网站上使用，它可能会帮助那些正在寻求实现这种效果的人。
这是Github上回购的link，解释如下：
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);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11665484
复制相关文章
相似问题