jQuery在后台运行，但不在前台运行

Question

I have this code fragment:

 if(!encryption_state){ if(cKey=="" || cKey==null){ cKey=getKey(aid); //here we trying to obtain key if(cKey!="" && cKey!=null && cKey!=undefined){ if(isJSON(jKey) && encryption_state){ var tjKey = JSON.parse(jKey); tjKey[aid] = cKey; jKey = JSON.stringify(tjKey); }else{ jKey = json.stringify({aid: cKey}); } encryption_state=true; } } if(!encryption_state){ if(cKey=="" || cKey==null){ cKey=rndstr(32); //generate string } var arr = {}; if(isJSON(jKey)) arr = JSON.parse(jKey); arr[aid] = cKey; jKey = JSON.stringify(arr); encryption_state = true; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

But when i call getKey(kaid) function:

 function getKey(kaid){ $.ajax({ method: "POST", url: "/?mod=key&fnc=syncKey", data: { aid: kaid }, done: function(data) { var tret = (JSON.parse(data)['msg']); return tret; } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Browsers don't continue do function getKey(), they do next commands in parent function, i don't know why they ignore web server answer and don't let function return server response :(

Answer 1

in general, an ajax call is asynchronous. That means, a sequence like

 var a = 0;

 a = getAwithAjaxFromServer(...);

 console.log(a);

will immediately print "0" while the ajax is still runnng.

Your entire logic with cley and encryption_state has to be put into the done function:

if(!encryption_state){
    if(cKey=="" || cKey==null){
        cKey=getKey(aid);
    }
}

and in your ajax:

function getKey(kaid){
    $.ajax({
        method: "POST",
        url: "/?mod=key&fnc=syncKey",
        data: {
            aid: kaid
        },
        done: function(data) {
            var tret = (JSON.parse(data)['msg']);


            .... PUT ALL THE LOGIC HERE .....

        }
    });
}

Answer 2

You must understand asynchronous mechanism in javascript to continue calling ajax. There are a lot of resources and stackoverflow questions. For example: https://www.pluralsight.com/guides/front-end-javascript/introduction-to-asynchronous-javascript

So, you can convert the code so:

if(!encryption_state){
    var serverKeyCallback = function(cKey) {
        if(cKey!="" && cKey!=null && cKey!=undefined){
            if(isJSON(jKey) && encryption_state){
                var tjKey = JSON.parse(jKey);
                tjKey[aid] = cKey;
                jKey = JSON.stringify(tjKey);
            }else{
                jKey = json.stringify({aid: cKey});
            }
            encryption_state=true;
        }
    };
    var localKeyCallback = function(cKey) {
        if(!encryption_state){
            if(cKey=="" || cKey==null){
                cKey=rndstr(32); //generate string
            }
            var arr = {};
            if(isJSON(jKey)) arr = JSON.parse(jKey);
            arr[aid] = cKey;
            jKey = JSON.stringify(arr);
            encryption_state = true;
        }
    }
    manageKey(cKey, aid, serverKeyCallback, localKeyCallback);
}

function manageKey(cKey, kaid, serverKeyCallback, localKeyCallback) {
    if(cKey=="" || cKey==null) {
        $.ajax({
            method: "POST",
            url: "/?mod=key&fnc=syncKey",
            data: {
                aid: kaid
            },
            done: function(data) {
                var tret = (JSON.parse(data)['msg']);
                serverKeyCallback(tret);
                localKeyCallback(tret);
            }
        });     
    }
    else {
        localKeyCallback(cKey);
    }
}

Defining two encapsulated pieces of code, one to execute after serverResponse, and the other to execute after the serverResponse or when you have the cKey locally stored. I haven't tested the code, but it must work as you expect.