js保存数据执行顺序和页面渲染效果图加载问题

  今天在做一个项目的时候，预期效果：点击保存按钮，loading图片转圈中，图片(十几张吧)单个循环提交服务器；

  实际效果：点击保存，ajax提交图片到服务器，由于图片是base64的，需要循环到服务器上传之后拿到图片服务器地址；

以下为代码：注：必须为同步上传图片

图片上传成功：调用保存方法，将转换之后的图片地址拿到，和form数据一起提交；

问题呈现：

点击完保存按钮，loading渲染效果一直不显示，页面出现卡住情况(实际情况为此时ajax正在循环提交图片到服务器)，

但是我的loading代码是在ajax提交图片之前出现的，执行效果却把上传图片的代码放在前面，一直等图片上传完才会

出现loading效果；这点是我不明白的，

经高人指点，js在执行的时候是单线程执行任务的，虽然loading的代码在前面；但是在loading执行完之后，ui其实不

是立刻呈现在页面的，js会继续执行，由于执行时遇到了ajax同步上传代码方法，于是就有了卡住的情况；

解决方案：

loadingShow();

/**图片地址转换！*/
            function doUploadImage(){
                resultJson = $.parseJSON(resultJson);
                for(var i = 0;i<resultJson.length;i++){
                    if(resultJson[i]){
                        $.ajax({url: "", async: false,success: function(data){}
                        });
                    }
                }
                doSave();//此方法为图片上传完之后的保存方法
            }

/**保存数据之前将base64转为图片http地址*/
            if(options.source == '666'){
                setTimeout(doUploadImage, 100);//doUploadImage此方法为上传图片部分js代码，在点击按钮方法中重新定义方法
            } else {
                doSave();
            }

实现原理：点击保存按钮的瞬间，调用loading；

抽离上传图片和保存数据方法；调用setTimeout来模拟js进程执行图片上传和数据提交任务；

完美错开和loading共同使用同一个进程，导致界面出现卡顿。