我要评论前言
前些天在使用ajax的时候，犯了傻，改一个bug改了很久，今天特地记录一下。
问题描述
使用ajax请求后台数据，然后加入到html页面中，思路流程大概是这样的：
- ajax请求后台数据
- 全部后台数据保存到一个全局变量（数组）
- 将请求到的部分数据动态加入页面的innerHTML中
之所以不直接加入全部数据，是因为数据量太大，加载慢，故使用【懒加载】的方式，即用户滑屏幕到最下方才加载新一部分的数据。
看起来好像没啥问题，逻辑上也说得通。但是实际执行的时候，发现第一次载入数据时，全局变量总是undefined的，导致第一次数据刷新不出来，进而导致页面没有滑到最下方，进而导致加载卡死。
这个bug我改了很久，上网查了很多资料，终于找到原因。
问题分析
因为ajax是异步的。对 异步，这意味着，我们第一次载入数据的时候，可能ajax的请求还未完成。因为异步请求之后，马上就会载入数据，而不是等待请求的完成。
因为向服务器请求数据的时间代价远大于执行JavaScript的时间，所以下文执行载入数据的代码的时候，全局变量仍然未被ajax的返回数据赋值，所以是undefined，这导致了第一次加载的失败
解决方案1：同步ajax
将ajax的请求模式设置为同步，这意味着不会在两个时间线执行JavaScript，必须等待请求结果返回，再执行下面的代码。
解决方案2：ajax请求返回时载入数据
在ajax请求返回时（即回调函数），再给全局变量赋值，进而加载部分数据（这是初次加载数据），可以有效保证全局变量不会undefined
本文地址：https://blog.csdn.net/weixin_44176696/article/details/107317335
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论