0

午後、私は 1 つの関数を実行する必要があるという問題に直面しています。それが終了したら、次の関数を実行し、これを 4 つの関数に対して実行します。レイアウトするための正しい構文を見つけようとして、しばらくこれに取り組んでいました。私の関数が呼び出され、この特定のシナリオに対処するものを見つけることができないようです。

html: 

<div id = "putcontenthereafterajax">
</div><!--end putcontenthereafterajax-->

<div id = "putfooterhereafterajax">
</div<!--end putfooterhereafterajax-->

jquery:

$(window).load(function() { 


function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        //alert("I cached "+this+"");
    });
    $('#progressbarinner').css("width","200px");//change the width of the inner progress bar div
}

function changecss(){
    $('.hidetillcache').css("visibility","visible");//make the page visible
    $('#loadingscreen').fadeOut("slow");
}

function contentajax(){
    $.post("templates/content.php",
    {
        whatamidoing:"imgettingthecontent"
    },
    function(data){
        $('#putcontenthereafterajax').after(''+data+'');
        $('#progressbarinner').css("width","400px");//change the width of the inner progress bar div
    });
}

function footerajax(){
    $.post("templates/footer.php",
    {
        whatamidoing:"imgettingthefooter"
    },
    function(data){
        $('#putfooterhereafterajax').after(''+data+'');
        $('#progressbarinner').css("width","500px");//change the width of the inner progress bar div
    }); 
}

preload([
    'images/careers.jpg',
    'images/careers.png',
    'images/contact.jpg',
    'images/facebook.png',
    'images/footer.png',
    'images/footerblack.png',
    'images/footergrey.png',
    'images/home.jpg',
    'images/media.jpg',
    'images/media.png',
    'images/myitv3.jpg',
    'images/newindex.jpg',
    'images/newindex.png',
    'images/services.jpg',
    'images/twitter.png'
], contentajax(), footerajax(), csschanges());

});

基本的に、各関数が終了すると少しいっぱいになるローディングバーがあり、各関数を正しい順序で次々に実行する必要があります。すべての関数が機能し、キャッシングとajax、さらにはcssの変更が機能します. ただし、ローディングバーを補完するために、それらを正しい順序で強制し、前のものが完了するまで実行を待つ方法を見つけることができないようです。誰にもアイデアはありますか？

4

3 に答える 3

2

非同期関数呼び出しを連鎖させたい。

jQuery のdeffered.thenメソッドを使用します。

$.ajax()、$.post()、などの ajax 関数は$.get()、Deferred オブジェクトを返します。

あなたのケースでこれを使用できます：

function contentajax(){
    // add the return instruction to return the Deferred object
    return $.post("templates/content.php", {... });
}

function footerajax(){
    //same here
    return $.post("templates/footer.php", { ... }); 
}

// chain the deferred calls :
contentajax()
   .then( footerajax() )
   .then( csschanges() )

画像の読み込みが完了するまで待ちたい場合でもDeferred、読み込みメカニズムを単一の .xml 内にラップすることで、この抽象化を使用できますPromise。私はぐるぐる回って、この要点を見つけました（著者に正当なクレジットを与える必要があります：Adam Luikart）。

于 2013-04-30T14:36:26.753 に答える
1

By default your ajax calls are async. You can't guarantee the order of returns async. It sounds like you want execution in synchronous order. Either use async: false in your ajax calls, or use each next function as a success callback to the current one and don't loop through them in preload.

        success: function(data, textStatus, jqXHR)
        {
                successCallback(successCallbackArgs);
        }
于 2013-04-30T14:55:15.713 に答える
1

コールバック関数を使用してみてください。

  • .css を使用する代わりに、.animation({'':''},200,function(){"........別の関数をここに......"}) を使用してみてください。
  • .fadeOut(200,function(){".....別の関数がここにある....."}) と同じです。

したがって、最後に contentajax() のみを呼び出します。

それが役立つことを願っています。

于 2013-04-30T14:36:50.960 に答える