在从多个功能加载所有内容之前加载完成

时间:2017-04-07 14:29:20

标签: javascript jquery ajax function loading

我确信这会非常简单,但是在调用一个需要通过ajax进行各种不同函数调用的函数时,我遇到了一个问题。我想在后面显示一个加载器页面,直到一切都完成,但它没有发生。

function expand(ID, user) {

$('.loadingBlackSml, .loadingSml').fadeIn(1000);
checkSession();
expand2(ID, user);
$('.loadingBlackSml, .loadingSml').fadeOut(1000);
}

哪个电话

function checkSession() {
return $.ajax({
    type: "POST",
    url: "/Test.aspx/checkForSession",
    //data: "{}",
    data: "{'idleTime':'" + clickedDT + "'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (sessionCheck) {
        sessionActive = JSON.stringify(sessionCheck.d);
    }
}).done(function () {
    //if session comes back as dead, redirect to restart session
    if (sessionActive == "\"false\"") {
        var url = "/Error.aspx?RefreshNeeded=true&page=" + window.location.pathname;
        $(location).attr('href', url);
    }
    //if page has gone past timeout length, try and reload it
    else if (sessionActive == "\"timeout\"") {
        var urlTO = window.location.pathname;
        $(location).attr('href', urlTO);
    }
});
}

function expand2(ID, user) {
return $.ajax({
    type: 'POST',
    contentType: "application/json; charset=utf-8",
    url: '/Test.aspx/markExpanded',
    data: "{'ID':'" + ID + "', 'user':'" + user + "'}",
    async: false,
    success: function (response) {
    },
    error: function ()
    { console.log('there is some error'); }

}).done(function () {
});
}

但加载叠加层在完成它的工作之前就消失了吗?我已经看到有关使用$ .when进行通话的事情,但我不确定如何使其正常工作?

任何建议都会很棒。感谢

1 个答案:

答案 0 :(得分:0)

尝试在完成请求中隐藏 expand2或checkSession函数中的加载。喜欢这个

... .done(function () {
    $('.loadingBlackSml, .loadingSml').fadeOut(1000);
});

所以在一切都结束后,加载器将被隐藏。 为了确保一切都结束,你可以设置" flag"。例如check = 2.并且

check--; check||$('.loadingBlackSml, .loadingSml').fadeOut(1000);

已编辑10.04.17

请求标记(检查)的示例

var check = 0; // count pending requests
function expand(ID, user) {

$('.loadingBlackSml, .loadingSml').fadeIn(1000);
count = 2;
checkSession();
expand2(ID, user);
}

function checkSession() {
return $.ajax({
    type: "POST",
    url: "/Test.aspx/checkForSession",
    //data: "{}",
    data: "{'idleTime':'" + clickedDT + "'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (sessionCheck) {
        sessionActive = JSON.stringify(sessionCheck.d);
    }
}).done(function () {
    //if session comes back as dead, redirect to restart session
    if (sessionActive == "\"false\"") {
        var url = "/Error.aspx?RefreshNeeded=true&page=" + window.location.pathname;
        $(location).attr('href', url);
    }
    //if page has gone past timeout length, try and reload it
    else if (sessionActive == "\"timeout\"") {
        var urlTO = window.location.pathname;
        $(location).attr('href', urlTO);
    }
    count--;
    if (count === 0) { // check. are all requests finished
        $('.loadingBlackSml, .loadingSml').fadeOut(1000); 
    }
});
}
function expand2(ID, user) {
return $.ajax({
    type: 'POST',
    contentType: "application/json; charset=utf-8",
    url: '/Test.aspx/markExpanded',
    data: "{'ID':'" + ID + "', 'user':'" + user + "'}",
    async: false,
    success: function (response) {
    },
    error: function ()
    { console.log('there is some error'); }

}).done(function () {
    count--;
    if (count === 0) {
        $('.loadingBlackSml, .loadingSml').fadeOut(1000); 
    }
});
}

当然,你可以移动

    count--;
    if (count === 0) {
        $('.loadingBlackSml, .loadingSml').fadeOut(1000); 
    }

分开功能