Javascript + SPServices while executing the code doesn't show a loading modal nor modifies a button attribute

Question

basically this is my code

 $('#saveButton').click(function(){
            showLoadingDiv();
            $('#saveButton').attr('disable','disable');
        });
    function showLoadingDiv(){

        //$('#save').attr('disabled','disabled')
        $('button').prop('disabled', true);
        $('#loading-div1').show();
        console.log('ya paso')
}

I apply an spservice to save in sharepoint, and a webservice to save inside baasbox.

I can't get to show the loading div, or disable the button, but it does the procedure of saving the elements inside sharepoint and baasbox web service.

I think this is due to javascript being asynchronous but I cant find a way to succesfully show the loading while saving, and then hide the loading when finish.

Answer 1

jQuery deferred object can solve your problem. https://learn.jquery.com/code-organization/deferreds/examples/

Using the above concept you can make the asynchronous calls work in synchronous way.

Let me know if you have more questions.