Question

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

$(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 函数。

由于您还有其他几件小事，我会告诉您更改代码。

所以你的 $（文件）.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调用后的回调函数

1 个答案: