js异步获取数据的问题
来源:互联网 发布:怎么求逆矩阵 编辑:程序博客网 时间:2024/05/22 10:33
最近做js开发的时候发现了很多哥们不能区分同步和异步的区别,典型的在ajax部分,在该ajax为异步操作的时候,获取不到success之后的data的值,于是产生了各种奇葩的写法。比如创建一个局部变量再返回,然而并不觉得有什么用。还有的是将这个异步操作改成同步操作,然后获取data的值,平心而论,的确是可以这么做,不过如果这个ajax需要拉取大量的数据的时候,很容易就出现页面卡死的情况。所以,为了帮助初学者处理这个问题(减少坑爹的代码),才有了这个博客。
1:同步和异步的区别
首先,js是一个单线程的执行环境,即一次只能执行一个任务。如果有数个任务,那么这些任务会从上至下依次挨个执行。这种执行方式的好处是简单,实现也简单,缺点是这个如果有大量的任务,或者其中一个任务耗时时间很长,其他的任务暂时无法执行,就会造成浏览器无响应(俗称假死,卡死)。
针对这种情况,js出现了同步和异步的概念。"同步模式"就是上一段的模式,后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的、同步的;"异步模式"则完全不同,每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
2:ajax async:true的解决方法
对于如下代码段看这篇博客的人应该都很熟悉:
</pre><pre name="code" class="javascript">function getData(){var getdata;$.ajax({ type:"post", url:"url", data:{ param1:param1, param2:param2 }, async:true, dataType:"json", success:function(data){ getdata = data; }}); return getdata;};
</pre><span style="white-space:pre"></span>通过向url传param1和2的值,这个ajax操作为异步操作,成功后将data的值返回,造成了我在别处调用了这个function,就能获取这个data的值得假象,还是too young啊。当在别处调用这个function的时候,总是惊讶的发现:哎?我这边控制台明明打印出了data的值啊,为什么不能用呢?然后就是这个debug找错,找了半天也没找到,于是乎尝试着把async改成了false,后来发现还是没有什么用。</p><p><span style="font-size:12px;"></span></p><p><span style="font-size:12px;"><span style="white-space:pre"></span>实际上,针对这种情况,推荐的一种解决方法就是传入回调函数,将依赖于这个data的各种代码放到一个回调函数里面,然后执行如下的代码</span></p><p><span style="font-size:12px;"></span><pre name="code" class="javascript">function getData(callback){$.ajax({ type:"post", url:"url", data:{ param1:param1, param2:param2 }, async:true, dataType:"json", success:function(data){ callback(data); }});};然后在你代码其他地方这么写:
//getData(callback)上面的代码getData(callback);//跟ajax data无关的代码于是乎你要的data全部传到callback里面执行,而不依赖data的代码不管你这个ajax,向下接着执行。
填坑完毕
0 0
- js异步获取数据的问题
- Web项目,异步获取,数据展示乱码的问题笔记
- Node.js+Wilddog 中复杂嵌套数据查询的异步处理同步返回数据问题
- 获取js异步函数的返回值
- 获取表单数据,js{的}serialize()方法乱码问题
- ajax实现异步获取数据 (js创建ajax对象)
- XmlHttp异步获取网站数据的例子
- XmlHttp异步获取网站数据的例子
- XmlHttp异步获取网站数据的例子
- XmlHttp异步获取网站数据的例子
- XmlHttp异步获取网站数据的例子
- XmlHttp异步获取网站数据的例子
- XmlHttp异步获取网站数据的例子
- XmlHttp异步获取网站数据的例子
- 我的专用ajax异步获取数据
- 简单的异步获取网络数据
- 关于Microsoft.XMLHTTP或Ajax中异步获取数据的问题
- 在线访谈:解决jQuery异步获取数据,客户端始终不更新的问题
- spring3整合quartz2,实现动态添加、修改、暂停、重启定时任务
- imshow 显示图像 出现全部白色
- [LeetCode]Substring with Concatenation of All Worlds(渣算法)_TBC
- 通过Sql实现根据分组合并指定列内容的查询
- [Android中级]使用Commons-net-ftp来实现FTP上传、下载的功能
- js异步获取数据的问题
- Android应用Activity、Dialog、PopWindow、Toast窗口添加机制及源码分析 《五》-Toast
- nginx + lua 白名单机制
- Spark代码总结(1)
- Android高手进阶教程(四)之----Android 中自定义属性(attr.xml,TypedArray)的使用!
- Java中判断字符串是否为数字的五种方法
- 《Windows核心编程》---Windows服务
- 迭代器.NET实现—IEnumerable和IEnumerator (foreach实现)
- 明明导入button 包 还是报错 的解决方法~