35

私がやろうとしているのは、CPUを集中的に使用するスクリプト（実行に3〜12秒かかり、AJAXなし）を実行する前に、単純なdivを「Processing ...」と更新してから、divを「Finished！ 「」それが終わったら。

私が見ているのは、divが「Processing...」で更新されないことです。そのコマンドの直後にブレークポイントを設定すると、divテキストが更新されるので、構文が正しいことがわかります。IE9、FF6、Chrome13でも同じ動作です。

jQueryをバイパスして基本的な生のJavascriptを使用している場合でも、同じ問題が発生します。

あなたはこれが簡単な答えを持っていると思うでしょう。ただし、jQuery .html（）と.text（）にはコールバックフックがないため、これはオプションではありません。また、アニメーション化されていないため、操作する.queueはありません。

以下で準備したサンプルコードを使用して、これを自分でテストできます。このサンプルコードは、5秒の高CPU関数を使用したjQueryとJavascriptの両方の実装を示しています。コードは簡単に理解できます。ボタンまたはリンクのいずれかをクリックしても、「処理中...」は表示されません。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script type="text/javascript">
function addSecs(d, s) {return new Date(d.valueOf()+s*1000);}
function doRun() {
    document.getElementById('msg').innerHTML = 'Processing JS...';
    start = new Date();
    end = addSecs(start,5);
    do {start = new Date();} while (end-start > 0);
    document.getElementById('msg').innerHTML = 'Finished JS';   
}
$(function() {
    $('button').click(function(){
        $('div').text('Processing JQ...');  
        start = new Date();
        end = addSecs(start,5);
        do {start = new Date();} while (end-start > 0);
        $('div').text('Finished JQ');   
    });
});
</script>
</head>
<body>
    <div id="msg">Not Started</div>
    <button>jQuery</button>
    <a href="#" onclick="doRun()">javascript</a>
</body>
</html>
4

4 に答える 4

19

それを処理に設定し、setTimeout を実行して、div が更新されるまで CPU を集中的に使用するタスクが実行されないようにします。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script>
function addSecs(d, s) {return new Date(d.valueOf()+s*1000);}
function doRun() {
    document.getElementById('msg').innerHTML = 'Processing JS...';
    setTimeout(function(){
         start = new Date();
         end = addSecs(start,5);
         do {start = new Date();} while (end-start > 0);
         document.getElementById('msg').innerHTML = 'Finished Processing';   
    },10);
}
$(function() {
    $('button').click(doRun);
});    
</script>
    </head>
<body>
    <div id="msg">Not Started</div>
    <button>jQuery</button>
    <a href="#" onclick="doRun()">javascript</a>
</body>
</html>

必要に応じて setTimeout 遅延を変更できますが、低速のマシン/ブラウザーでは大きくする必要がある場合があります。

編集：

アラートまたは確認ダイアログを使用して、ページ時間を更新することもできます。

document.getElementById('msg').innerHTML = 'Processing JS...';
if ( confirm( "This task may take several seconds. Do you wish to continue?" ) ) {
     // run code here
}
于 2011-09-08T01:10:31.433 に答える
3

5 秒間実行され、その間 Web ブラウザがフリーズするループがあります。Web ブラウザがフリーズしているため、レンダリングを行うことができません。ループの代わりに使用する必要がありますsetTimeout()が、ループは時間がかかる CPU 集中型関数の代わりにすぎないと思いますか? setTimeout を使用して、関数を実行する前にブラウザーにレンダリングの機会を与えることができます。

jQuery:

$(function() {
    $('button').click(function(){
        (function(cont){
            $('div').text('Processing JQ...');  
            start = new Date();
            end = addSecs(start,5);
            setTimeout(cont, 1);
        })(function(){
            do {start = new Date();} while (end-start > 0);
            $('div').text('Finished JQ');   
        })
    });
});

バニラ JS:

document.getElementsByTagName('a')[0].onclick = function(){
    doRun(function(){
         do {start = new Date();} while (end-start > 0);
         document.getElementById('msg').innerHTML = 'Finished JS';   
    });
    return false;
};

function doRun(cont){
    document.getElementById('msg').innerHTML = 'Processing JS...';
    start = new Date();
    end = addSecs(start,5);
    setTimeout(cont, 1);
}

また、常に var キーワードを使用してすべての変数を宣言し、それらをグローバル スコープに公開しないようにすることも忘れないでください。JSFiddle は次のとおりです。

http://jsfiddle.net/Paulpro/ypQ6m/

于 2011-09-08T01:17:56.780 に答える