【JavaScript】闭包

闭包是JS中的一种特性，往往用于解决一些特定的问题，当A函数中返回了B函数， 并且返回的B函数中有使用到A函数中的局部变量（包含参数）就会形成一个特性的形态，就叫闭包。

此时，理论上来说A函数执行完成后，生成了B函数后，应该被垃圾回收机制回收，但是因为生成的B函数还在使用A函数中的局部变量， 就会导致A函数没有及时回收，导致内存泄露。

应用 - 防抖

<input
    type="text"
    id="oninput"
>
<script>
    const inputelement = document.getElementById('oninput')
    // inputelement.oninput = function () {
    //     console.log('input 触发')
    //     console.log("代码执行,ajax");
    // }
    inputelement.oninput = (function () {
        var timer = null;
        return function () {
            console.log("input 触发")
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                console.log("代码执行,ajax");
            }, 500)
        }
    })()

应用 - 节流

// 2. 函数节流（onrize，onscroll）
// window.onresize = (function() {
//     return function() {
//         console.log("代码执行echarts resize")
//     }
// })()
window.onresize = (function () {
    var date = Date.now();
    return function () {
        if (Date.now() - date > 500) {
            date = Date.now();
            console.log("代码执行echarts resize")
        }
    }
})()

应用 - 解决索引问题

这里使用 let 不存在这个问题。

// 3. 索引问题
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var oli = document.getElementsByTagName("li");

    // for (var i = 0; i < oli.length; i++) {
    //     oli[i].onclick = function () {
    //         console.log(i)
    //     }
    // }

    for (var i = 0; i < oli.length; i++) {
        oli[i].onclick = (function (index) {
            return function () {
                console.log(index)
            }
        })(i)
    }
</script>