JS 定时器 setTimeout 与 setInterval 的区别和用法

1、setTimeout

　　延迟执行，只执行一次，定时炸弹、炸了就没了

window.setTimeout(function(){要执行的事件},间隔时间毫秒);

2、setInterval

无限循环，每一次循环有间隔时间，一般不要小于20毫秒
        它是有返回值的，可以用一个变量来接收这个定时器对象

window.setInterval(function(){要执行的事件},间隔的时间毫秒);

3、clearInterval  

　　关闭定时器

window.clearInterval(要关闭的定时器对象);

一旦执行这句代码，会立刻停止此定时器对象的执行

4、offset

　　当前即时的对象的高度、宽带、位置，直接到浏览器上去找

 var v = document.getElementById('a')
 
v.offsetWidth      // 当前的宽带
v.offsetHeight     // 当前的高度
v.offsetLeft       //当前距离左侧位置
v.offsetTop        //当前距离上方位置
v.offsetParent     //当前起点位置 

实例

例1、点击按钮，按钮本身的长度发生变化，并且位置移动

 <input type="button" value="按钮" id="a" />

<script type="text/javascript">
    var v = document.getElementById('a')
    v.onclick = function () {
        v.style.width = v.offsetWidth +  + "px";    //长度改变
        v.style.left = v.offsetLeft +  + "px";      // 位置移动,位置发生改变时必须要有定位 +100向右移动，-100向左移动
    }
</script>

例2、点击按钮，按钮本身的长度、位置持续变化

<input type="button" value="按钮" id="a" />
 
<script type="text/javascript">
    var v = document.getElementById('a')
    v.onclick = function () {
        window.setInterval(function () {
             v.style.width = v.offsetWidth +  + "px";
             v.style.left = v.offsetLeft +  + "px";
        }, )
    }
</script>

例3、 在例2的基础上让定时器停下

<input type="button" value="按钮" id="a" />
 
<script type="text/javascript">
    var v = document.getElementById('a')
       v.onclick = function () {
       var t=  window.setInterval(function () {  //先用 var t 接收 window.setInterval 的值，这个值就是定时器对象
            if (v.offsetLeft >)
            {
                window.clearInterval(t)
            }
            v.style.width = v.offsetWidth +  + "px";
            v.style.left = v.offsetLeft +  + "px";
        }, )
    }
</script>

5、计时器

<button id="btn_Phone" click="SetInter()">获取验证码</button>
 
<script type="text/javascript">
 
    function SetInter() {
        time = ;
        $("#btn_Phone").attr("disabled", true);
        var myset = setInterval(
            function countDown() {
                if (time === ) {
                    $("#btn_Phone").attr("disabled", false);
                    $("#btn_Phone").html("重新获取验证码");
                    clearInterval(myset); 
　　　　　　　　　　　　return;
                }
                else {
                    time--; $('#btn_Phone').html(time + "秒后重新获取");
                }
            }, );
    }
 
</script>