闭包的实际应用

1、函数的防抖

// 函数防抖
function antiShake(fn, wait){
    let timeOut = null;
    return function(){
        // 这里不能使用箭头函数， 因为箭头函数没有arguments这个对象， 因此这里如果使用箭头函数，会根据作用域链往上查找，最后得到的arguments对象是antiShake的arguments
        if(timeOut){
            clearTimeout(timeOut);
            timeOut = null;
        };
        timeOut = setTimeout(() => {
            console.log('执行了啊')
            fn.call(null, ...Array.from(arguments))
        }, wait);
    }
};

这里举个例子：

<input type="text">
<input type="button" class="submit" value="提交" />
<script>
    // 函数防抖
    function antiShake(fn, wait){
        let timeOut = null;
        return function(){
            // 这里不能使用箭头函数， 因为箭头函数没有arguments这个对象， 因此这里如果使用箭头函数，会根据作用域链往上查找，最后得到的arguments对象是antiShake的arguments
            if(timeOut){
                clearTimeout(timeOut);
                timeOut = null;
            };
            timeOut = setTimeout(() => {
                fn.call(null, ...Array.from(arguments))
            }, wait);
        }
    };
    function http1(e){
        console.log('请求的数据是：', e.target.value)
    };

    function http2(p1, p2){
        console.log(p1, p2)
    };

    var paramsObj = {
        p1: 'id, ',
        p2: '输入值' + document.querySelector('input').value
    };

    // 候选词
    document.querySelector('input').addEventListener('input', antiShake(http1, 1000));
    // 点击触发
    document.querySelector('input[type="button"]').onclick = antiShake(http2, 1000).call(null, paramsObj.p1, paramsObj.p2);
</script>