0

私は古い学校のモデム接続をシミュレートするために何かを考え出そうとしています。一度にレンダリングするのではなく、可変速度で自分自身をペイントするIEテキスト。

これが私が思いついたものです。

http://jsfiddle.net/vUPK2/

私が抱えている問題は、それをこれ以上速く進めることができないということです。setIntervalを1msに設定しました。これは、可能な限り高速のようです。

私が経験しているスピードキャップを取り除くためにこれをリファクタリングする方法を誰かが知っていますか？

4

5 に答える 5

3

これは、少なくとも FireFox では少し速いようです。完全な書き直しにもかかわらず、唯一の本当の違いは、「ループ」内で jQuery または文字列の長さのプロパティを使用していないことです。また、一度に複数のキャラクターを実行できる機能も追加しました。5～10文字が適切な範囲のようです。

function TextTyper(targetElement, charsAtATime, textToType) {
    var i,
        l = textToType.length,
        timeout,
        el = $(targetElement)[0],
        textNode = el.childNodes[0];
    if (!textNode) {
        textNode = document.createTextNode('');
        el.appendChild(textNode);
    }
    this.begin = function() {
        i = 0;
        if (timeout) { clearTimeout(timeout); }
        textNode.nodeValue = '';
        typeChar();
    };
    console.log(textNode);
    function typeChar() {
        if (i < l) {
            textNode.nodeValue += textToType.substr(i, charsAtATime);
            i += charsAtATime;
            timeout = setTimeout(typeChar, 1);
        } else {
            timeout = 0;
        }
    }
}

(new TextTyper('#test', 8, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rhoncus urna vitae mi aliquet suscipit. Nullam vulputate ultrices tortor vel luctus. Duis sodales lacinia consequat. Vestibulum vehicula, ligula sit amet tincidunt scelerisque, orci arcu malesuada odio, eu ornare ipsum risus at metus. Nullam porttitor condimentum nunc, nec euismod massa consectetur id. Mauris ut nisl nulla, et tristique sem. In non ante vel libero lacinia vehicula in quis urna. Suspendisse urna erat, ornare sit amet rhoncus eget, bibendum at ipsum.'))
   .begin();

ここでは、クロージャーとスコープに関するいくつかのベスト プラクティスを確認しました。ただし、ページのアンロード時に TextTyper オブジェクトを削除し、タイトなループで新しいオブジェクトを作成せずに適切に破棄する必要があります (そうしないと、targetElement のクロージャーでメモリ リークが発生する可能性があります)。

jsfiddle で実際にこれを参照してください。

注:同じスクリプトの複数の呼び出しが互いに影響し合うことを望まなかったので、setTimeout代わりに選択しました。setIntervalコードの実行速度を考えると、それが可能であるとは思えませんが、これは優れた設計手法です。これが Ajax 呼び出しである場合、最初の要求からの応答が返される前にサーバーが要求で飽和状態になることは望ましくありません。

于 2012-07-25T19:37:33.540 に答える
1

一度に複数の文字を追加してみることができます。2文字または3文字、またはそれ以上を追加してみてください。

アニメーションの速度は、フレームレートとフレーム間の変化の量に依存します。

于 2012-07-25T19:20:58.533 に答える
1

はい、displayText関数に2文字（またはそれ以上）を追加するだけです。これをforループで実行すると、変数を簡単に調整できます。

于 2012-07-25T19:21:10.717 に答える
1

ミリ秒単位の速度になるとjQueryを使用しないでください。少なくとも参照をキャッシュしてください。アニメーションを最小 timeoutより速くするには、一度に複数の文字のみを追加できます。特に、デバイス間で同様の速度が必要な場合は、最小値が異なる可能性があるため、より長いタイムアウトを使用する必要があります。標準のアニメーション速度は 60 フレーム/秒です。

function displayText(id, text) {
    var node = document.createTextNode(""),
        i = 0,
        chars = 5;
    document.getElementById(id).appendChild(node);

    (function add(){
        node.data += text.substr(i, chars);
        i += chars;
        if (i < text.length)
            setTimeout(add, 1000/60);
    })();
}

jsfiddle.net のデモ

于 2012-07-25T20:08:24.717 に答える
0

別の方法

var txt="Lorem ipsum dolor sit amet";
index=0;
function displayText(text) {
    $('#test').append(text[index]); index ++;
    $('#test').append(text[index]); index ++;
    if (index  < text.length) {
        setTimeout(function(){ displayText(txt) }, 1);
    }
}

displayText(txt);

デモ。

またはクローザーを使用して

function txt_show(text)
{
    var index=0;
    var txt=text;
    displayText();
    function displayText() {
        $('#test').append(txt[index]); index ++;
        $('#test').append(txt[index]); index ++;
        if (index  < txt.length) setTimeout(displayText, 1);
    }
}
var txt="Lorem ipsum dolor sit amet";
txt_show(txt);

デモ。

ただし、IE速度は遅くなります (IE8、FF、および Chrome でのみテスト済み)。

于 2012-07-25T19:48:19.723 に答える