将数据加载到 jquery 中的地图中并不能始终如一地工作
Posted
技术标签:
【中文标题】将数据加载到 jquery 中的地图中并不能始终如一地工作【英文标题】：Loading data into a map within a jquery does not work consistenty 【发布时间】：2014-08-13 02:48:18 【问题描述】：在 html 方面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="Content-Language" content="en" />
<style>
p.seriffont-family:"Times New Roman",Times,serif;
p.sansseriffont-family:Arial,Helvetica,sans-serif;
</style>
<link rel="stylesheet" href="style/main.css" type="text/css">
<title>PDS Jobs</title>
</head>
<script src="/_utils/script/sha1.js"></script>
<script src="/_utils/script/json2.js"></script>
<script src="/_utils/script/jquery.js"></script>
<script src="/_utils/script/jquery.couch.js"></script>
<script src="vendor/couchapp/jquery.couchLogin.js"></script>
<script src="vendor/couchapp/jquery.couchProfile.js"></script>
<script src="script/turboapp.js"></script>
以下代码旨在成为一个沙发应用程序，并且是“turboapp.js”的一部分：
db = $.couch.db("testdb3");
var PMdata = new Object();
for (i in values)
PMdata[values[i]] = new Array();
db.view("turbologviewer/pm",
reduce : false,
success : function(data)
$(data.rows).each( function (index, item)
if (PMdata.hasOwnProperty(item.key[0]))
if (item.key[1] == 0)
PMdata[item.key[0]][0] = item.value;
else if (item.key[1] == 1)
PMdata[item.key[0]][1] = item.value;
);
);
for (i in values)
alert("Job " + values[i] + "\n" +
" Values1: " + PMdata[values[i]][0] + "\n" +
" Values2: " + PMdata[values[i]][1] + "\n");
旨在获取存储在“值”中的选定键。对于这些键，视图中的数据值应该存储在 PMdata 中。实际上，此代码正在连接两个文档的数据。任何有关如何执行此操作的建议也将不胜感激。
当我正常运行时，“值”中有两个条目，第一个警报得到“Values1: undefined \n Values2: undefined \n”，第二个警报得到很好的数据。
当我在 firefox 调试器下运行它并在警报处设置断点时，两个警报都显示了非常好的数据！
发生了什么事？
谢谢， 古斯塔沃·特列兹
【问题讨论】：
如果db.view 是一个异步函数，那么你在你的 ajax 方法完成之前运行你的 for 循环，到第二次迭代它已经完成并最终加载数据
我认为可能是这样！本机 jquery 能够将“async:false”添加到 ajax 方法中。知道我如何能够使用 couchapp 视图功能吗？
我个人建议不要使用同步 ajax 方法，除非绝对必要，因为如果它们花费很长时间，它们会占用 UI 并且看起来浏览器已冻结。我说使用回调方法或研究使用承诺。我不知道 couchdb 是否有办法设置同步 ajax 调用
直接使用 jquery 重写代码并且 async:false 有效。它现在使用： $.ajax( url: DATABASE + "/_design/turbologviewer/_view/pm", async: false, success: ... );我将如何使用回调方法对其进行编码？
【参考方案1】：
事实证明，这个问题至少还有两个其他解决方案。两者都涉及在 jQuery AJAX 调用完成后采取行动。
第一个解决方案，将 for 循环移动到 ajaxStop 中，如下所示：
$(document).ajaxStop(function () for (i in values) ... );
第二种方法是使用：
$.when( db.view( ... ) ).then(function () for (i in values) ... );
我不确定第二种方法是否有效，只是因为 jQuery 与 couchapp 版本不兼容。但原则上这两种方法都可以。
【讨论】：
【参考方案2】：上面的问题确实是db.view的异步操作造成的。据我所知，解决方案是将循环移动到成功函数内部的末尾，如下所示：
db.view("turbologviewer/pm",
reduce : false,
success : function(data)
$(data.rows).each( function (index, item)
...
doWorkFunction(PMdata);
);
将添加一个新函数 (doWorkFunction)。这会强制在 HTTP 获取数据的处理之间进行同步。在 db.view 之后键入的任何函数都将异步执行！
【讨论】：
以上是关于将数据加载到 jquery 中的地图中并不能始终如一地工作的主要内容，如果未能解决你的问题，请参考以下文章
无法将谷歌静态地图加载到jquery mobile中的div中