1

ちょっと面白い問題にぶつかります。HTML（）に入ると、曜日が非表示になりますclass="day"。Dayをクリックすると、展開されて、。を使用したAJAX呼び出しにより、その日のすべてが表示されます$.post。これはすべてうまく機能しています。

ユーザーが1週間全体を一度に見たいと思うかもしれないと思うので、id="expander"すべてを表示するボタン（）があります。getSchedule()ただし、クリック内から関数を呼び出すと、関数内#expanderを除くすべてがループします。次に、をループします。$.postgetSchedule()$.post

$(document).ready(function()
{ 
    $('.day').click(function(){
        pass = $(this).prop('id');
        getSchedule(pass);
    });

    $('#expander').click(function(ex){
            $('.day').each(function(index){
                    pass = $(this).prop('id');
                    getSchedule(pass);
            });
            $('#expander').text('Hide All Days');
        ex.preventDefault();
        return false;       
    });
});

function getSchedule(elementid){
            dow = elementid.substr(-1);
            url = "standarddayofweek.php?d="+dow;
            $theday = $("#"+elementid);
            console.log("The day is "+$theday.prop('id'));
            $.post(url,function(data){
                    $theday.children('.dayschedule').html(data);
                }, "html"
            )
    }

私が得るコンソールの応答は次のとおりです。

The day is d1 
The day is d2
The day is d3 
The day is d4 
The day is d5 
The day is d6
The day is d7 
XHR finished loading: "http://127.0.0.1/standarddayofweek.php?d=1"
In the post function, the day is d7
XHR finished loading: "http://127.0.0.1/standarddayofweek.php?d=2"
In the post function, the day is d7
XHR finished loading: "http://127.0.0.1/standarddayofweek.php?d=3"
In the post function, the day is d7 
XHR finished loading: "http://127.0.0.1/standarddayofweek.php?d=4"
In the post function, the day is d7 
XHR finished loading: "http://127.0.0.1/standarddayofweek.php?d=5"
In the post function, the day is d7 
XHR finished loading: "http://127.0.0.1/standarddayofweek.php?d=6"
In the post function, the day is d7 
XHR finished loading: "http://127.0.0.1/standarddayofweek.php?d=7"
In the post function, the day is d7

骨抜きにされたHTML：

<div id="expander">Click me to expand</div>

<div id="d1" class="day">
            <div class="dayschedule"></div>
</div>
<div id="d2" class="day">
            <div class="dayschedule"></div>
</div>

....

<div id="d7" class="day">
            <div class="dayschedule"></div>
</div>

何が起こっている？AJAXの発生が速すぎるかどうかを確認するために、遅延を追加しようとしましたが、何も変わりませんでした。

4

4 に答える 4

1

すべてのブラウザが同期して動作するわけでasync: falseはないため、包括的なソリューションではありません。ただし、の変数のローカライズはgetSchedule()です。

これを試して：

function getSchedule(elementid) {
    var dow = elementid.substr(-1);
    var url = "standarddayofweek.php?d="+dow;
    var $theday = $("#"+elementid);
    console.log("The day is "+$theday.prop('id'));
    $.post(url, function(data) {
        $theday.children('.dayschedule').html(data);
    }, "html");
}

したがって、（公式および非公式の）変数を含むクロージャが形成されます。これらの変数は、外部関数が完了して戻ってきた場合でも、非同期で起動したときに内部関数（ajaxサクセスハンドラー）で引き続き使用できます。

于 2012-10-26T00:30:00.197 に答える
1

Javascript は主に単一の実行スレッドで実行されます。ここを参照してください。これがコードに与える意味:

まず、.each単なるループです。ajax リクエストが for ループで送信されると想像してください。

for(...)
    $.post();

ajax コールバックは、現在の実行が停止するまで実行できません。したがって、コードはすべての要素を通過し、ログに記録されます。その後、スレッドが解放され、ajax コールバックが制御できるようになります。

コンテンツのリストまたはバッチを取得できるようにプログラムを変更して、複数の要素に対して 1 つの要求のみが必要になるようにする必要があります。

于 2012-10-25T22:38:58.070 に答える
0

JavaScript はマルチスレッドではありません。非同期処理が発生する前に関数を返す必要があります。

実行フローをブラウザーに返さずに繰り返し呼び出す$.postことで、コードの終了時に実行される非同期アクションを効果的にキューに入れます。

たとえば、永久にループしてコードが返されない場合、が呼び出されることはありません。$.post

于 2012-10-25T22:39:03.563 に答える
0

@RobertSmith のおかげで、答えは $.post から $.ajax に切り替わりました。私はちょうど変更しました：

$.post(url,function(data){
                    $theday.children('.dayschedule').html(data);
                }, "html"
            )

に

$.ajax({
    url: url,
    async:false,
    success: function(data) {
     $theday.next().children('.dayschedule').html(data);
    }
});

に注意してくださいasync:false。それがスイッチを必要としたものです。

みんなコメントありがとう！

于 2012-10-26T00:22:14.083 に答える