Как тормознуть почти все бровзеры

Вот уже который раз натыкаюсь на то, что не умею использовать таймеры на веб-странице.

Простенькая страничка стабильно вешает большую тройку MSIE/FireFox/Chrome (остальные не проверял):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>canvas + img</title>
<style type="text/css">
canvas#viewport { border: 1px solid white; width: 900px; }
</style>
</head>
<body onload="onBodyLoad();">
<canvas id="viewport"></canvas>
<img id="img2change" src="philip_fry.jpg" alt="click to continue" onclick="newImg();" onload="imgLoaded();">
<script type="text/javascript">
var n;
var tmr;
var t;
function make_base()
{
base_image = new Image();
base_image.src = 'philip_fry.jpg';
context.drawImage(base_image, 100, 100);
}
function imgLoaded()
{
var img = document.getElementById('img2change');
console.log("entering imgLoaded("+img.src+")");
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < 1000);
if(n==0)
{
img.src='philip_fry_c.jpg';
n = 1;
}
else
{
img.src = 'philip_fry.jpg';
n = 0;
}
img.refresh();
tmr = setTimeout(newImg(), 1000);
console.log("leaving imgLoaded()");
}
function newImg()
{
var img = document.getElementById('img2change');
var t1 = Math.round(new Date().getTime()/1000);
if(t1!=t)
{
console.log("t=" + n);
if(n==0)
{
img.src='philip_fry_c.jpg';
n = 1;
}
else
{
img.src = 'philip_fry.jpg';
n = 0;
}
t = t1;
clearTimeout(tmr);
tmr = null;
}
}
function onBodyLoad()
{
var canvas = document.getElementById('viewport');
context = canvas.getContext('2d');
make_base();
n = 0;
t = Math.round(new Date().getTime()/1000);
//tmr = setTimeout(newImg(), 1000);
}
</script>
</body>
</html>

Примечание: вместо моих картинок (philip_fry_c.jpg,philip_fry.jpg) можно использовать любые другие.