jQuery ajax调用后的回调函数

Question

我有一个函数可以对 REST 端点进行 jQuery ajax 调用。此函数将运行 5-6 次，使用不同的端点收集数据以进行验证。在此期间，我想在浏览器屏幕上显示一个微调器，以向最终用户表明该程序正在处理。我想在完成后隐藏微调器。我正在努力弄清楚如何让它发挥作用。我的想法是一个简单的回调函数。我试过将回调函数放在 click 方法和 css 方法中，以及直接放在 ajax 调用 (validateAcctStr) 中，其中 none 似乎有效。我觉得我缺少一些简单的东西？

$(document).ready(function(){
$("#submit").click(function(disableSpinner){
    $("#json-overlay").css("display", "block");
    validateAcctStr("ValidationAccount", "#accountTxt", "#acctValid");
    validateAcctStr("ValidationBusiness", "#businessTxt", "#busValid");
});
    function disableSpinner(){
        $("#json-overlay").css("display", "none");
        alert("test");
    }
});

这是我目前的 ajax 调用（它从 SharePoint 列表中提取数据）：

function validateAcctStr(list, inputField, validationField) 
{
$.ajax({
    url: "https://urlAddress/_api/web/lists/getbytitle('"+list+"')/items?$orderby=Title asc&$top=4999",
    type: "GET",
    dataType: "json",
    headers: {
        Accept: "application/json;odata=verbose"
    },
success: function(data){
    $.each(data.d.results, function(index, item){
            var arrayVar = $(inputField).val();
            if(item.Title === arrayVar){
                $(validationField).html("Valid").css({"background-color": "green", "color": "white", "text-align": "center"});                  
                return false;
            } else {
                 $(validationField).html("Invalid").css({"background-color": "red", "color": "white", "text-align": "center"});
            }
        });
    }   
});
}

Answer 1

你几乎所有的东西都准备好了，只需要把东西按正确的顺序放好。

问题是您从未调用 disableSpinner 函数。

由于您还有其他一些小问题，我将向您展示更改代码。

因此您的 $(document).ready() 工作人员将变为：

$(document).ready(function(){
    $("#submit").click(function(ev){
        activeSpinner();
        validateAcctStr("ValidationAccount", "#accountTxt", "#acctValid");
        validateAcctStr("ValidationBusiness", "#businessTxt", "#busValid");
    });
});

当您有另一个 javascript 代码时：

// You worked well wrapping the code to disable the spinner in a function
// let's do it for the activation too.
function activeSpinner() {
    $("#json-overlay").css("display", "block");
}

function disableSpinner() {
    $("#json-overlay").css("display", "none");
    // this is just for test:
    // alert("test");
}

并且 ajax 调用：

function validateAcctStr(list, inputField, validationField) {
$.ajax({
    url: "https://urlAddress/_api/web/lists/getbytitle('"+list+"')/items?$orderby=Title asc&$top=4999",
    type: "GET",
    dataType: "json",
    headers: {
        Accept: "application/json;odata=verbose"
    },
success: function(data){
    disableSpinner(); // As the first task you have to disable the spinner.
    $.each(data.d.results, function(index, item){
            var arrayVar = $(inputField).val();
            if(item.Title === arrayVar){
                $(validationField).html("Valid").css({"background-color": "green", "color": "white", "text-align": "center"});                  
                return false;
            } else {
                 $(validationField).html("Invalid").css({"background-color": "red", "color": "white", "text-align": "center"});
            }
        });
    },
 error: function(err) {
    disableSpinner(); // to avoid spinner active on an error
    // do something with the error.
 }
});
}

更新

如果您需要等到回调列表完成，那么您应该使用稍微复杂的方法。

您可以引入承诺，但您必须重写几乎所有代码。在你的情况下你应该使用回调：

function callbackCounter () {
    var count = 0;
    return {
        set: function (n) {
           count = n;
        },
        incr: function () {
           cont++;
        },
        done: function() {
            count--;
        },
        doneAll: function() {
            count = 0;
        },
        isDone: function() {
            return count === 0;
        }
    }
}

// ...
$("#submit").click(function(ev){
    activeSpinner();
    var countCallbacks = callbackCounter ();
    countCallbacks.set(2);
    validateAcctStr("ValidationAccount", "#accountTxt", "#acctValid", countCallbacks);
    validateAcctStr("ValidationBusiness", "#businessTxt", "#busValid", countCallbacks);
});

function validateAcctStr(list, inputField, validationField, countCallbacks) {

// snipp...
success: function(data){
    // here you decrement the callbacks:
    countCallbacks.done();
    if (countCallbacks.isDone()) disableSpinner(); // As the first task you have to disable the spinner.
},

错误处理程序中的相同代码。

jQuery ajax调用后的回调函数

Callback function after jQuery ajax call

javascript

ajax

jquery

sharepoint-2013