3

以下の例で、appendContent() を変更せずに「クリック時の応答が遅い」をより速く応答させる方法を誰か教えてもらえますか? 安価な操作をより高価な操作の前に配置し、安価な操作が実際に迅速に実行されるようにする方法があるかどうか疑問に思っています.

<div id="draw">slow response when clicked</div>

<div style="overflow: auto; height: 300px; border:solid 1px grey" id="content"></div>

<script language="javascript">

    var clickLink = document.getElementById("draw");
    var contentDiv = document.getElementById("content")

    function appendContent(){
        contentDiv.innerHTML =  contentDiv.innerHTML + "hello ";
    }

    clickLink.onclick = function(){
        clickLink.style.color = "red";
        for (var i = 0; i < 1500; i++){     
            appendContent();    
        }
    };
</script>
4

5 に答える 5

1

フィードバックのメカニズムは、ユーザーが待たなければならない期間ごとに異なる必要があります。0.1 秒未満の場合、ユーザーは気づきません。

1 秒から 10 秒の間に、アプリが処理中であることを示す何らかのアニメーション gif などのシンボルを表示するだけです。http://www.ajaxload.info/を参照してください。 「処理中」という ID を持つ div を使用し、スピナーでスタイルを設定し、次の jquery コードを使用して処理の前後で表示と非表示を切り替えます。

function showProcessing(){
    $("#processing").fadeIn("fast");
}

function hideProcessing(){
    $("#processing").fadeOut("fast");
}

10 秒を超える場合は、処理時間の見積もりを提供するのが理想的です。

これらの数値のソースについては、応答時間の概要を参照してください。

次のコードは、すぐにリンクの色を赤に変更し、数分の 1 秒後に追加メソッドを呼び出します。基本的に、ブラウザがループでハングアップする前に別のスレッドを実行できるようにします。ブラウザによってはタイムアウトの調整が必要な場合があります。より一般的な方法で制御を放棄する必要がある場合は、 Neil Mix のThreading in JavaScript 1.7 を調べてください。

    function startAppend(){
      for     (var i = 0; i < 1500; i++){             
              appendContent();        
      }
    }

    clickLink.onclick = function(){
            clickLink.style.color = "red";
            setTimeout('startAppend()', 10)                
    };
于 2009-02-23T22:33:06.160 に答える
1

ユーザーにフィードバックを提供して、何かが起こっていることを知らせるだけの場合は、ボタンの横にアニメーション gif (読み込み中の円など) を配置し、ボタン自体を無効にしてから、通常の状態に戻します。再描画が完了した後。

于 2009-02-23T22:34:56.157 に答える
0

これを試してください：デフォルトで読み込み中のグラフィックを含むdivを追加しますが、CSSをdisplay：noneに設定します。次に、div＃drawをクリックしたら、読み込み中のグラフィックの表示をブロックに設定してから、描画を行います。描画が終了したら、表示をなしに戻します。

于 2009-02-24T00:43:53.490 に答える
0

JavaScript はマルチスレッドを適切にサポートしていないため、dom 操作を小さな部分に分割する必要があります。通常、そのようなことは、別のスレッドで長い操作を実行することによって行われます。

于 2009-02-23T22:28:44.750 に答える
0

Yahoo User Interface Library には、AJAX などのテクノロジを使用して Web アプリケーションの応答性を改善する優れたコードとコントロールが多数含まれています。

Yahoo! などのライブラリを使用すると、この機能をアプリケーションに追加する時間が大幅に短縮され、エラーが発生しにくくなります。

http://developer.yahoo.com/yui/

于 2009-02-23T22:32:30.560 に答える