闭包函数及其节流原理

 

节流：

<button id="dianji">dianji</button>

document.getElementById("dianji").onclick = debounce(function(){
        console.info("执行调用的方法")
    },2000);

function debounce(func,wait) {
        let timeout;
        return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);

        let callNow = !timeout;
        timeout = setTimeout(() => {
        timeout = null;
        }, wait)

        if (callNow) func.apply(context, args)
        }
    }

 

$mc: document.getElementById("dianji").onclick是全局对象，只要把debounce赋值给他了，就会随着这个页面而存在。onclick调用的是函数，直接把返回的这个函数当函数来调用，也就是下面的例子如a();这样调用。

 

闭包原理分析：

 

var a = debounce(function(){

    },33333)

    console.info(a())//第一次调用
    console.info(a())//第二次调用
}


function debounce(func,wait) {
        console.info("//1///",wait)
        let timeout;
        return function () {
            console.info("//2///",wait)
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);

        let callNow = !timeout;
        timeout = setTimeout(() => {
        timeout = null;
        }, wait)

        if (callNow) func.apply(context, args)
        }
    }

 

$mc:调用 debounce函数的时候，返回内部函数，a就是返回来的函数，a第一次调用的时候，和第二次调用是同一个对象，改子函数调用完了，垃圾回收不会回收a里面的debounce对象，只会回收debounce的子函数，因debounce被实例化了，被实例化的父函数还没有结束，所以debounce没有结束，不会被回收。

 

 

 

总结：该方法虽然能实现节流||防抖等功能，但我个人觉得直接用使用this更为方便，更便捷，例子就不写了。