欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

记一次使用ajax时忽略其“异步”性质而犯的低级错误

程序员文章站 2022-06-25 12:15:51
前言前些天在使用ajax的时候,犯了傻,改一个bug改了很久,今天特地记录一下。问题描述使用ajax请求后台数据,然后加入到html页面中,思路流程大概是这样的:ajax请求后台数据全部后台数据保存到一个全局变量(数组)将请求到的部分数据动态加入页面的innerHTML中之所以不直接加入全部数据,是因为数据量太大,加载慢,故使用【懒加载】的方式,即用户滑屏幕到最下方才加载新一部分的数据。看起来好像没啥问题,逻辑上也说得通。但是实际执行的时候,发现第一次载入数据时,全局变量总是undef...

前言

前些天在使用ajax的时候,犯了傻,改一个bug改了很久,今天特地记录一下。

问题描述

使用ajax请求后台数据,然后加入到html页面中,思路流程大概是这样的:

  1. ajax请求后台数据
  2. 全部后台数据保存到一个全局变量(数组)
  3. 将请求到的部分数据动态加入页面的innerHTML中

之所以不直接加入全部数据,是因为数据量太大,加载慢,故使用【懒加载】的方式,即用户滑屏幕到最下方才加载新一部分的数据。

记一次使用ajax时忽略其“异步”性质而犯的低级错误
看起来好像没啥问题,逻辑上也说得通。但是实际执行的时候,发现第一次载入数据时,全局变量总是undefined的,导致第一次数据刷新不出来,进而导致页面没有滑到最下方,进而导致加载卡死

这个bug我改了很久,上网查了很多资料,终于找到原因。

问题分析

因为ajax是异步的。对 异步,这意味着,我们第一次载入数据的时候,可能ajax的请求还未完成。因为异步请求之后,马上就会载入数据,而不是等待请求的完成。

因为向服务器请求数据的时间代价远大于执行JavaScript的时间,所以下文执行载入数据的代码的时候,全局变量仍然未被ajax的返回数据赋值,所以是undefined,这导致了第一次加载的失败

记一次使用ajax时忽略其“异步”性质而犯的低级错误

解决方案1:同步ajax

将ajax的请求模式设置为同步,这意味着不会在两个时间线执行JavaScript,必须等待请求结果返回,再执行下面的代码。
记一次使用ajax时忽略其“异步”性质而犯的低级错误

解决方案2:ajax请求返回时载入数据

在ajax请求返回时(即回调函数),再给全局变量赋值,进而加载部分数据(这是初次加载数据),可以有效保证全局变量不会undefined

记一次使用ajax时忽略其“异步”性质而犯的低级错误

本文地址:https://blog.csdn.net/weixin_44176696/article/details/107317335