杂记（关于制作进度条）

最新推荐文章于 2024-11-08 16:09:18 发布

banmao8461

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量93

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/AB786883603/p/8325386.html

版权

今晚想为网站添加加载进度条，发现了自己几个知识点忘了或者说还没完全理解。

制作进度条很理所当然地会想起使用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()