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

左手的ㄟ右手 2022-04-27 22:40 135阅读 0赞

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E1NDUxMzI1Njk_size_16_color_FFFFFF_t_70][]

图片上传成功：调用保存方法，将转换之后的图片地址拿到，和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共同使用同一个进程，导致界面出现卡顿。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E1NDUxMzI1Njk_size_16_color_FFFFFF_t_70]: /images/20220121/299430d8aa4f4156a766d9c893d9f340.png