title: JavaScript - cannot leave while loop, why?
body: <p>I am building a small project website to learn more about WebDev.</p>
  
  <p>I try to get random images from imgur.
  It works good to the point where I want to "filter" the removed.png redirection if an image didnt exist or was deleted. But I keep getting stuck in an endless loop. Maybe someone can help me out here find the error!</p>
  
  <p>Example snippet (It will stop your browser if you run it tho):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function fetch() {
   var src = document.getElementById("imageGrid").innerHTML = "";
   var max = 50;
   var i;
   for(i = 0; i &lt; 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 &lt; 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;
   }
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;script src="scripts/fetch.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/jquery.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  &lt;button id='fetchButton' onclick="fetch()"&gt;Imgur&lt;/button&gt; 
  &lt;div id="imageGrid"&gt;&lt;/div&gt;
  &lt;img id="bigImage" width="400" height="400"/&gt;
  &lt;script&gt;
  &lt;/script&gt;
  
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I considered the [marked as duplicate] - Question link.
  And tried to apply it to my case.
  This is what I got now. I think I dont really grasp the asynchonous stuff just now. Can someone help me out?</p>
  
  <p>New code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function fetch() {
   var src = document.getElementById("imageGrid").innerHTML = "";
   var max = 50;
   var i;
   for(i = 0; i &lt; 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 &amp;&amp; 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 &lt; 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;
   }
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;script src="scripts/fetch.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/jquery.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  &lt;button id='fetchButton' onclick="fetch()"&gt;Imgur&lt;/button&gt; 
  &lt;div id="imageGrid"&gt;&lt;/div&gt;
  &lt;img id="bigImage" width="400" height="400"/&gt;
  &lt;script&gt;
  &lt;/script&gt;
  
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>