Question: ```
var contentparanum = 1;
while($(".container").height() < 200){
        paranum++;
        $(".content").append("<p></p>");
        $(".content p:nth-child("+contentparanum+")").load("getcontent.php?paranum="+paranum);
        contentparanum++;
        //use load() to add content into container, when the height of container is over 200px the loop stops
}

```

The problem is the loop never stops. I added alert(".container"); into the loop, I only get 0.It seems the height of the container can be obtained only after while loop is finished. How can I fix this problem?

---

I added the specific code

and the html code here

```
  <div class="container">
    <div class="content"></div>
  </div>

```

Answer: 
As .load() is asynchronous you will have to wait for the callback to make another call to load. Try this:

```
    var contentparanum = 1;
    var paranum = 1;

    $("#load").click(function () {
        // Checks if the height is below 200 before making the first call
        if($(".content").height() <200) 
        {
            LoadContent();
        }
    });

    function LoadContent() {

        $(".content").append("<p></p>");

        $(".content p:nth-child(" + contentparanum + ")").load("getcontent.php?paranum=" + paranum,
           // This is the callback function 
           function (response, status, xhr) {
            if (status == "error") {
                alert(xhr.status + " " + xhr.statusText);
            }
            else {
                // Checks if the height is below 200 and if yes makes a recursive call 
                if ($(".content").height() < 200) {
                    contentparanum++;
                    paranum++;
                    LoadContent();
                }
                else {
                    return;
                }
            }
        })
    }

```
```
function loadContent(paranum) {
    $("#container").append("<p></p>")
    $("#container").children().last().load("getcontent.php?paranum="+paranum, function() {
        if($("#container").height() < 200) {
            window.setTimeout(loadContent, 0, paranum+1);
        }
    });
    }

$(function() {loadContent(1);});

```