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 にまったく慣れていませんが、プロミスをawaitC# のキーワードと同一視しています。

4

3 に答える 3

2

setTimeout/setIngerval/requestAnimationFrame はほとんど唯一の選択肢です。同じ関数を何度も呼び出している間は、それらを再帰的とは呼びません。コールタックは完全に独立しています。

あなたが実際に作成しようとしているアニメーションの種類は何ですか? CSS アニメーションを使用する場合は、文字ごとにスパンを作成し、それらを非表示にしてからフェード/移動する方がよい場合があります。

于 2012-12-25T18:36:17.970 に答える
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 に答える
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 に答える