Javascript 在 WinRT 中暂停动画

Question

我想在 javascript 中暂停执行，以便我可以为屏幕上的文本外观设置动画。我的代码目前是这样的:

function AnimateWord(word) {
    for (var i = 0; i <= word.length; i++) {
        myTest.textContent += word.charAt(i);
        // need to pause here and then continue
    }
}

我做了一些研究，在 javascript 中执行此操作的首选方法似乎是 setTimeout，尽管我真的看不出在这种情况下如果不创建递归循环它会如何工作(这对我来说似乎不是正确的解决方案)。

有没有办法解决这个问题，还是我坚持使用 setTimeout 和递归循环？

编辑:

基于一些额外的测试，我尝试使用 Promise.timeout:

for (var i = 0; i <= word.length; i++) {
    WinJS.Promise.timeout(1000).then(TypeLetter(word.charAt(i)));
}

function TypeLetter(letter) {
    myTest.textContent += letter;
}

但这似乎并没有真正暂停。事实上，它似乎完全忽略了超时。我也试过:

setTimeout(TypeLetter(word.charAt(i)), 1000);

结果基本相同。 this page似乎暗示它应该等待然后执行任务。我是 WinJS 的新手，但我将 promise 等同于 C# 中的 await 关键字。

Answer 1

setTimeout/setIngerval/requestAnimationFrame 几乎是您唯一的选择。我不会称它们为递归 perse——而你确实一遍又一遍地调用相同的函数。调用策略是完全独立的。

您真正想要制作什么样的动画？在使用 CSS 动画时，最好为每个字符创建一个跨度，隐藏它们，然后淡入淡出/转换它们。