概述
最近工作中使用ajax,有时会报json4 is not a function的错误,有时又不会报错。找了很久,网上说是因为多次请求同一个资源导致的,但是我检查了自己的代码,对于重复资源并没有重复请求,并且,按理说,即使同时请求同一个资源也不应该报这个错误。
最后终于发现原因了,是因为timeout超时填的是5000,但由于资源加载,这个ajax从开始请求到接收到资源的总时间超过了5s,所以报了这个错。
总结一下,报这个错的原因是timeout字段设置太小了。
解决方案
那怎么解决呢?
方法之一是去掉timeout。但是对于移动端来说,我还是倾向于加上timeout。
通过检查代码,发现这个ajax请求这么长时间的原因是,有一段js插入了图片,从而导致图片资源和ajax几乎同时进行http请求,但是图片资源的http请求优先度比较高,所以先加载图片,但是在加载图片之前,由于ajax发送了请求,所以timeout已经开始计时了,等到图片加载完成,ajax返回数据的时候,所用总时间已经超过了timeout值。
所以方法之二是对那些图片使用懒加载,但是代码改动比较大,而且体验也没那么好。
方法之三是,移动代码,使这个ajax请求返回了值之后再加载插入图片的js代码。这个我本来不怎么认同的,但是这么处理之后,性能有很惊人的优化,找不出原因。最后我使用了这种方案。
我学到了什么
- ajax的timeout导致的报错和解决方案。
- 图片资源的http请求优先级高于ajax。(不论谁先发出http请求)