0

下午所有，我遇到了一个问题，我需要运行一个函数，然后完成后，运行下一个，并为四个函数执行此操作，我已经有一段时间试图找到正确的布局语法我的函数调用并似乎找不到任何东西来解决这个特定的场景。

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 的defered.then方法：

ajax 函数，如$.ajax(), $.post(), $.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通过将加载机制包装在单个Promise. 我四处搜索并找到了这个要点（应归功于作者：Adam Luikart）。

于 2013-04-30T14:36:26.753 回答
1

尝试使用回调函数。

  • 而不是使用 .css 尝试使用 .animation({'':''},200,function(){"........another function here......"})
  • 与 fadeOut 相同 .fadeOut(200,function(){".....这里的另一个函数............"})

所以最后你只会调用 contentajax()。

希望有帮助。

于 2013-04-30T14:36:50.960 回答
1

默认情况下，您的 ajax 调用是异步的。您不能保证异步返回的顺序。听起来您希望以同步顺序执行。在 ajax 调用中使用 async: false ，或者使用每个 next 函数作为对当前函数的成功回调，并且不要在预加载中循环它们。

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