problem when creating simple counter in jQuery

problem when creating simple counter in jQuery

Hello everyone,

i am new to jQuery and i was practicing to make a simple counter that starts from 1 and ends at 10 with delay of 100 msec in between. The code i used looks the following

<html>
<head>
<title>Simple counter test</title>
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var i;
for(i=1;i<=10;i++)
{
var currentTime = new Date();
while(new Date() - currentTime < 100);
$("body").html(i);
}
});
</script>
</head>
<body></body>
</html>

The outer for loop counts the counter from 1 till 10, while the inner while loop creates 100 msec delay. The problem is that i see only the last element 10 but not the others.

I tried the setTimeout and setInterval methods which work perfect but they use asynchronous calls and what i am looking for is synchronous calls like while loops to create a delay.

I would be glad if someone with experience will help me solve it and thank you in advance.

Michael