JS-定时器管理实例

/**
 * Created by 12461 on 2016/11/6.
 */
window.onload = function () {
    var oBtn1 = document.getElementById('btn1');
    var oBtn2 = document.getElementById('btn2');
    var oDiv = document.getElementById('div1');
    //外面尽量不要放变量
    // var timer = null;
    oDiv.timer = null;

    oBtn1.onclick = function () {
        //先清除定时器
        clearInterval(oDiv.timer);
        //设置定时器
        oDiv.timer = setInterval(function () {
            //往前跑
            var speed = parseInt(getStyle(oDiv,'left')) + 20 ;
            if (speed > 800){
                speed = 800;
            }
            oDiv.style.left = speed + 'px';
            if (speed >= 800){
                clearInterval(oDiv.timer);
            }
        },30);

    };
    //拿到样式的函数
    function getStyle(obj,attr) {
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
    }
};