Wednesday, August 13, 2008

javascript 闭包妙用

在javascript中,程序是一行行执行的,在上一行返回结果后执行下一行的语句。如果在执行一条要耗时的操作,而接下来的程序操作与此条执行语句并无关系,则可将此语句放在一个闭包里去执行,用setTimeout(function(){}, 0)来激活此闭包运行,这个技巧可用于加速页面渲染,同时对多个dom对象操作。


<html>
<head>
<title>Yield demo</title>
<script type="text/javascript">
<!--
function doSave(id, doYield) {
document.getElementById(id).innerHTML = '<span style="font-style: italic;">Saving...</span>';
if (doYield) {
var startTime = (new Date()).getTime();
setTimeout(function() { doSaveImpl(id); }, 0); // runing in clousres
var endTime = (new Date()).getTime();
alert("yield time is:" + (endTime - startTime));
} else {
var startTime = (new Date()).getTime();
doSaveImpl(id);
var endTime = (new Date()).getTime();
alert(endTime - startTime); // firebug console.log()
}
}
function doSaveImpl(id) {
var numIters = 10000000;
for (var i = 0; i < numIters; i++) {
var j = Math.sqrt(i); // slow operation
}

document.getElementById(id).innerHTML = '<span style="color: #090">Saved!</span>';

setTimeout(function() { reset(id); }, 3000);
}
function reset(id) {
document.getElementById(id).innerHTML = 'Ready';
}
//-->
</script>
<style type="text/css">
.button {
border: 1px solid black;
background: #ffff9f;
padding: 5px;
font-size: 14pt;
color: black;
text-decoration: none;
-moz-border-radius: 8;
}
.status_msg {
color: #999;
margin-top: 0.5em;
font-size: 18pt;
}
</style>
</head>
<body>

<h1>Yield Demo</h1>

<h2>Without yielding:</h2>

<a href="javascript:;" onclick="doSave('noyield', false); return false;" class="button">Save</a>
<div id="noyield" class="status_msg">Ready</div>

<h2>With yielding:</h2>

<a href="javascript:;" onmousedown="doSave('yield', true); return false;" class="button">Save</a>
<div id="yield" class="status_msg">Ready</div>

</body>
</html>

Reference: http://josephsmarr.com/oscon-js/yield.html

No comments :