杂记（关于制作进度条）
今晚想为网站添加加载进度条，发现了自己几个知识点忘了或者说还没完全理解。
制作进度条很理所当然地会想起使用setTimeout()方法，使用animate()方法作为动画过渡，最后完成结果如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>进度条</title>
<style type="text/css">
.big{
width: 90%;
height: 20px;
background-color: #444;
margin: 50px auto;
}
.small{
width: 0%;
height: 100%;
background-color: pink;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
var time,a,b;
function progress() {
setTimeout(function(){
if (window.loaded) {
$('.small').animate({'width':'100%'},1000);
return;//结束
}
a = Math.random()*100;
b = time || -1;
time = b<a ? a :b;
time = time<99 ? time : 98;
$('.small').animate({'width':time + '%'},1000);
progress();
},200);
}
progress();
window.onload = function(){
window.loaded = true;//网站加载完成
};
</script>
</head>
<body>
<div class="big">
<div class="small"></div>
</div>
<iframe src="http://113.209.100.215:9000/" frameborder="0"></iframe>
</body>
</html>而在编写的过程中，我发现自己对两个知识点理不足：
- 1、
$(function(){})即$(docunment).ready与window.onload()之间的差异。一开始制作进度条使用的是$(function(){})而导致了页面内容还没加载完成，进度条就已经跑完了。其主要原因是$(function(){})即$(docunment).ready是在DOM文档树加载完之后执行一个函数，而window.onload()则是在DOM文档树和所有文件加载完之后执行一个函数。 - 2、加载成功后没有添加
return结束，而只是在内部使用了clearTimeout()方法，这样导致的结果是并不能完全的停止setTimeout()方法，个人理解为这是我对clearTimeout()方法理解有误，外部调用时能直接杀死还没执行的setTimeout()，而在内部调用的时候，clearTimeout()方法也能杀死还没执行的setTimeout()，注意是还没执行的setTimeout()，也就是说clearTimeout()并不能阻止当前已经执行的setTimeout()方法，这就导致了在接下来的执行过程里将再次产生另一个setTimeout()，因而要添加return结束当前setTimeout()
通常的，比如创建一个计时器，点击按钮进行执行
setTimeout()进行计时，此时在内部调用clearTimeout()，能防止因多次点击而导致同时存在多个setTimeout()在执行的情况
