需要 2 个函数来使用 Ajax 运行 onLoad - 只有 1 个函数可以工作
从洗牌函数开始（仅洗牌数组）。有用。 然后我定义 2 个全局变量，它们将确定图像在页面上显示的随机顺序。 picOrder 将是一个从 0 到 picCount 的简单数组，其中 picCount 由 Ajax onload 确定。正在检索 picCount，但未设置 picOrder 数组！如果我手动运行“arrangePics();”在控制台中它可以工作。它填充数组 picOrder，然后对其进行打乱。但是，通过将对两个函数的调用放在“”内或将“doStuff()”函数放在其中，它不起作用。
Array.prototype.shuffle = function() {
var s = [];
while (this.length) s.push(this.splice(Math.random() * this.length, 1)[0]);
while (s.length) this.push(s.pop());
return this;
}
var picOrder = new Array();
var picCount;
function getPicCount() {
// picCount = array(10);
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
picCount = xmlhttp.responseText;
}
}
xmlhttp.open("GET","/example.com/images.php?count=hello",true);
xmlhttp.send();
//picCount.shuffle;
}
function arrangePics() {
for(var i = 0;i<picCount;i++) {
picOrder[i] = i;
}
picOrder.shuffle();
//alert(picOrder);
}
HTML
<body onLoad="getPicCount();arrangePics();">
或
<body onLoad="doStuff();">
Starts with shuffle functions (just shuffles arrays). It works.
Then I define 2 global variables that will determine the random order for images to be displayed on the page.
picOrder will be a simple array from 0 to picCount, with picCount determined by Ajax onload. The picCount is being retrieved, but the the picOrder array is not being set! If I manually run "arrangePics();" in the console it works. It fills the array picOrder and then shuffles it. But it does not work by placing the calls to both functions inside "" or by putting the "doStuff()" function in there.
Array.prototype.shuffle = function() {
var s = [];
while (this.length) s.push(this.splice(Math.random() * this.length, 1)[0]);
while (s.length) this.push(s.pop());
return this;
}
var picOrder = new Array();
var picCount;
function getPicCount() {
// picCount = array(10);
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
picCount = xmlhttp.responseText;
}
}
xmlhttp.open("GET","/example.com/images.php?count=hello",true);
xmlhttp.send();
//picCount.shuffle;
}
function arrangePics() {
for(var i = 0;i<picCount;i++) {
picOrder[i] = i;
}
picOrder.shuffle();
//alert(picOrder);
}
HTML
<body onLoad="getPicCount();arrangePics();">
or
<body onLoad="doStuff();">
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您需要在异步 AJAX 调用返回后
arrangePics()，即您只能在if (xmlhttp.readyState==4 && ; xmlhttp.status==200) {}(callback) 块，否则无法确定数据已完全接收。当前发生的情况是 JavaScript 正在调用
getPicCount();arrangePics();- 第一个方法启动 AJAX 调用并立即返回，然后第二个方法将尝试排列 0 张图片。在控制台上手动执行arrangePics()会给系统带来足够的延迟，以便 AJAX 调用完成，并且picCount将按预期设置。因此，如果您将回调函数更改为：
它应该在收到计数后对图片进行随机播放。
You need to
arrangePics()after the asynchronous AJAX call has returned, i.e. you can only call it in theif (xmlhttp.readyState==4 && xmlhttp.status==200) {}(callback) block otherwise you cannot be sure that the data has been fully received.What is currently happening is that JavaScript is calling
getPicCount();arrangePics();- the first method initiates the AJAX call and returns immediately and then the second method will by trying to arrange 0 pics. ExecutingarrangePics()manually on the console would have introduced enough delay into the system for the AJAX call to complete and thepicCountwould be set as expected.So if you change the callback function to:
it should shuffle the pics after the count has been received.