3

我想在 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);

结果基本相同。 这个页面似乎暗示它应该等待然后执行任务。我对 WinJS 很陌生，但我将 promise 等同await于 C# 中的关键字。

4

3 回答 3

2

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

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

于 2012-12-25T18:36:17.970 回答
1

这是否符合您的要求：

var array1 = [];
function AnimateWord(word) {
    var test = $('#test');            
    for (var i = 0; i <= word.length; i++) {
        array1.push(word.charAt(i));
        test.delay(100).queue(function() {
            this.innerHTML += array1[0];
            array1.splice(0, 1);
            $(this).dequeue();
        });
    }
}

请同时查看小提琴链接：http: //jsfiddle.net/7Ea9u/

于 2012-12-28T15:45:33.157 回答
1 
var i = 0;
var str = "plz send teh codez";
var intervalId = setInterval(function(){
    myTest.textContent += str.charAt(i);
    if (++i >= str.length)
        clearInterval(intervalId);
}, 1000);

演示http://jsfiddle.net/qxfVu/1/

于 2012-12-28T16:08:55.617 回答