玩转HTML（003）

关于js定时器简单案例——实现盒子自动放大和缩小

今天，小编学习了js中的定时器。
定时器分为两种，setTimeout（只执行一次） 和 setInterval （实现循环）
通过 clearTimeout clearInterval 都是清除定时器的。

下面建立一个盒子模型，通过 设置 定时器来控制执行情况。

这里 我才用的是 setInterval，让他每个一段时间就执行一次函数，并通过判断来判断是不是 到达所需的条件。

下面的是填写在 javascript当中的代码：

var timer1 = setInterval(move1,1000);
    var div1 = document.getElementsByTagName("div")[0];
    var i = 0;
    function move1() {
    if(div1.style.height < 800 + 'px'){
        div1.style.height = 300 + 100 * i + 'px';
        div1.style.width = 300 + 100 * i + 'px';
        i++;
    }
    else {
        i = i - 1;
        clearInterval(timer1);
        var timer2 = setInterval(move2, 1000);
        function move2(){
            if(i>0){
            div1.style.height = 300 + 100 * i + 'px';
            div1.style.width = 300 + 100 * i + 'px';
            i--;
            }
            else {
                clearInterval(timer2);
            }
        }
    }}
    move1();
    document.writeln(div1.style.height + '<br>');
    document.writeln(i);
    clearTimeout(timer);

这里需要主义的是，判断盒子大小时，默认读取的是像素，当我们判断时的单位并不是 像素，需要我们自己加上像素单位。 同时 在设置定时器的时候也要注意 作用域的有效范围。

小编呢，其实一开始的思路并不是这个，我是想通过在while循环里面实现的。然后通过每次判断的时候，再等待一秒。
代码如下：
这里仅仅实现 放大操作。

//空函数
function fun() {
    }
    // var timer1 = setTimeout(fun,1000);
    var div1 = document.getElementsByTagName("div")[0];
    var i = 0;
    while (div1.style.height < 800 + 'px'){
        div1.style.height = 300 + 100 * i + 'px';
        div1.style.width = 300 + 100 * i + 'px';
        setTimeout(fun, 1000);
        i++;
    }

小编发现，这样加载出来的图片，直接就是一个大的。
后经过查阅资料后，发现Javascript是单线程执行的，且定时器的回调将在等待当前正在执行的任务完成后才执行。
按照小编所写的代码来看的化，应该是等待while循环执行下去之后，再处理 setTimeout的回调函数。为了证明，将 那个 空函数放上代码：

function fun() {
        console.log(i);
    }

这样 在网页的控制台查看写入情况：

可见 控制台输入了6次6；说明 fun函数实在最后面执行的，即while循环执行结束之后。