基础

闭包

通俗的讲，函数去访问其他函数的局部变量

　 　function funSome(some) {
        return function() {
            console.log(some);
        };
    }
    oBox.onmouseover = funSome("liu");

　　

 闭包选项卡

<div id="weiyi" class="box">
    <div class="order">
        <span>达文西</span><span>末梢血</span><span>华泰强</span><span>史克力</span>
    </div>
    <div class="target">
        <ul>
            <li>达文西</li>
            <li>末梢血</li>
            <li>华泰强</li>
            <li>史克力</li>
        </ul>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}
ul {
    list-style-type: none;
}

.box {
     325px;
    border: 3px solid #C81623;
    margin: 100px auto;
}
.order {
    padding: 5px;
    padding-right: 0;
}
.order span {
    display: inline-block;
     75px;
    height: 30px;
    margin-right: 5px;
    text-align: center;
    font: 400 normal 18px/30px "Microsoft Sans Serif";
    cursor: pointer;
    background-color: #DBE1E7;
}
.order span.special {
    background-color: #C81623;
}
.target li {
     90%;
    height: 200px;
    padding: 5%;
    background-color: #d7d764;
    display: none;
}
.target li.show {
    display: block;
}

　

window.onload = function () {
    function clearClass(aDiv) {
        for(var i= 0,l=aDiv.length;i<l;i++) {
            aDiv[i].className = "";
        }
    }
    function tab(parentId) {
        var oParent = document.getElementById(parentId);
        var aSpan = oParent.getElementsByTagName("span");
        var aLi = oParent.getElementsByTagName("li");

        for(var i= 0,l=aSpan.length;i<l;i++) {
            var timer = null;
            aSpan[i].onmouseover = function (index) {
                return function () {
                    clearTimeout(timer);
                    timer = setTimeout(function () {
                        clearClass(aSpan);
                        clearClass(aLi);
                        aSpan[index].className = "special";
                        aLi[index].className = "show";
                    },600);
                }

            }(i);
        }
        if (aSpan.length) aSpan[0].onmouseover();
    }
    tab("weiyi");

}

　

延时

　　function funDelay(fun,delay) {
        var timer = null;
        return function () {
            clearTimeout(timer);
            timer = setTimeout(fun,delay);
        }
    }
    window.onresize = funDelay(function () {
        var width = window.innerWidth || document.documentElement.clientWidth;
        console.log(width);
    },300);