Sharepoint Newform Javascript variable scope

Question

I have a javascript in custom list newform looks this

<script type="text/javascript">
    var kontivalue = 0;

    function PreSaveAction(){
        belegnummer =  SPUtility.GetSPField('Belegnummer').GetValue();
        Netamount = SPUtility.GetSPField('Nettobetrag').GetValue();
        retrieveList().then(function(){
        var nettovalue = Nettobetrag;
        var totalamount = kontivalue + Netamount;
         });
        if(totalamount <= nettovalue){
           return true;
           $('.FormErrors').hide();
        }
        else{
           $('.FormErrors').show();
           return false;
        }
    }

    function retrieveList() {
       return getItems('InvoiceAccountAssignments').then(
           function(camlValue){
               var listItemEnumerator = camlValue.getEnumerator();
               while (listItemEnumerator.moveNext()) {
                   var oListItem1 = listItemEnumerator.get_current();
                   kontivalue = kontivalue + oListItem1.get_item('InvoiceAccountAssignmentsAmountN');
               }
           },
           function(sender, args) {
               alert('An error occured while retrieving list items:' + args.get_message());
           }
       );  
    }

    function getItems(listTitle) {
        var belegvalue = window.belegnummer;
        var deferred = $.Deferred();
        var clientContext = new SP.ClientContext.get_current();
        var list = clientContext.get_web().get_lists().getByTitle(listTitle);
        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml('<View Scope=\'RecursiveAll\'><Query><Where><Eq><FieldRef Name=\'AttachedToInvoiceID\'/><Value Type=\'LookUp\'>'+ belegvalue +'</Value></Eq></Where></Query></View>'); 
        var items = list.getItems(camlQuery);
        clientContext.load(items);
        clientContext.executeQueryAsync(
            Function.createDelegate(this,
                function () { deferred.resolve(items); }),
            Function.createDelegate(this,
                function (sender, args) { deferred.reject(sender, args);})
        );
        return deferred.promise();
     };
</script>

I changed my code according to the MdMazz.. comment below. i got one step further but the code works when i press the save button second time because the retrieveList() function is async. Thank you.

Answer 1

I was tempted to comment about how awful your piece of code is (one over all: you are bloating the global scope with your variables), anyhow, the problem is that the function retrieveList is asynchronous, but within the PreSaveAction you are calling it as if it were synchronous.

You have to wait for it to complete, before moving to the next statement.

Make the following modifications:

//code omitted for brevity
Netamount = SPUtility.GetSPField('Nettobetrag').GetValue();
retrieveList().then(function(){
  var nettovalue = Nettobetrag;
  var totalamount = kontivalue + Netamount;
  // the rest of your code
});

function retrieveList() {
      return getItems('InvoiceAccountAssignments').then(
   // notice the added return statement before the getItems function invocation
   // the rest of your code

Now, that said, it won't work anyway. PreSaveAction is expected to return a boolean value synchronously, meaning that the caller won't wait on a promise. You have to always return false, then do whatever you need to do and/or check, and finally manually trigger the form submit/postback.