Question

我正在建立一个小型项目网站，以了解有关WebDev的更多信息。

我尝试从imgur获得随机图像。如果图像不存在或被删除，它可以很好地工作到我要“过滤” removed.png重定向的地步。但是我一直陷于无休止的循环中。也许有人可以在这里帮助我找到错误！

示例代码段（如果您运行浏览器，它将停止您的浏览器）：

function fetch() {
	var src = document.getElementById("imageGrid").innerHTML = "";
	var max = 50;
	var i;
	for(i = 0; i < max+1; i++)
	{
		var tries = 0;
		var validPic = true;
		var img = document.createElement("img");
		img.id = i;
		img.height = 64;
		img.width = 64
		while(validPic)
		{
			tries ++;
			img.src = generate_string(5);
			if(testRedirect(img.src))
			{
				var validPic = false;
				var src = document.getElementById("imageGrid");
				src.appendChild(img);
			}
		}
	}
	$("img").addClass("loadedImage");
	$("img").attr("onmouseover","imageEnlarge(this)");
}

function testRedirect(url) {
	var actualUrl = "";
	var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
	xhr.send();
	if (url != xhr.responseURL) {
		console.log("redirected to: " + xhr.responseURL);
		return false;
	}else{
		console.log("no redirecton found");
		return true;
	}
	return false;
}

function generate_string(length) { 
	var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghiklmnopqrstuvwxyz"; 
	var string = ""; 
    var i;
	for (i = 0; i < length; i++) {
		string += chars[Math.floor((Math.random() * chars.length) + 0)];
	}	 
	return "http://i.imgur.com/" + string + ".jpg";
}

function imageEnlarge(x) {
	
	document.getElementById('bigImage').src = x.src;
 }

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<script src="scripts/fetch.js"></script>
<script src="scripts/jquery.js"></script>
</head>

<body>


<button id='fetchButton' onclick="fetch()">Imgur</button> 
<div id="imageGrid"></div>
<img id="bigImage" width="400" height="400"/>
<script>
</script>




</body>

</html>

我考虑了[标记为重复]-问题链接。并尝试将其应用于我的案子。这就是我现在得到的。我想我现在还不太了解异步内容。有人可以帮我吗？

新代码：

function fetch() {
	var src = document.getElementById("imageGrid").innerHTML = "";
	var max = 50;
	var i;
	for(i = 0; i < max+1; i++)
	{
		var validPic = true;
		var img = document.createElement("img");
		img.id = i;
		img.height = 64;
		img.width = 64
		while(validPic)
		{
			var validImgur = false;
			img.src = generate_string(5);
			testRedirect(img.src, function(x){var validImgur = x; });
			if(validImgur)
			{
				var validPic = false;
				var src = document.getElementById("imageGrid");
				src.appendChild(img);
			}
		}
	}
	$("img").addClass("loadedImage");
	$("img").attr("onmouseover","imageEnlarge(this)");
}

function testRedirect(url, fn) {
	
	var xhr = new XMLHttpRequest();
	xhr.open('GET', url, true);

	xhr.onreadystatechange = function () {
		if (this.readyState == 4 && this.status == 200) {
			if(url != xhr.responseURL) {
				console.log("redirection to: " + xhr.responseURL);
				fn(false);
			}else {
				console.log("no redirection found");
				fn(true);
			}
		}
	};
	
	xhr.send();
	
}


function generate_string(length) { 
	var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghiklmnopqrstuvwxyz"; 
	var string = ""; 
    var i;
	for (i = 0; i < length; i++) {
		string += chars[Math.floor((Math.random() * chars.length) + 0)];
	}	 
	return "http://i.imgur.com/" + string + ".jpg";
}

function imageEnlarge(x) {
	
	document.getElementById('bigImage').src = x.src;
 }

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<script src="scripts/fetch.js"></script>
<script src="scripts/jquery.js"></script>
</head>

<body>


<button id='fetchButton' onclick="fetch()">Imgur</button> 
<div id="imageGrid"></div>
<img id="bigImage" width="400" height="400"/>
<script>
</script>




</body>

</html>

JavaScript-无法离开while循环，为什么？

0 个答案: