[JavaScript知识库]JavaScript防抖以及节流实现以及讲解（附带闭包讲解）

在学习防抖之前要先了解闭包

function fn(){
	let num = 0
	return function(){
		return ++num
	}
}
let foo = fn()
console.log(foo())//1
console.log(foo())//2

在JacaScript中，函数以及其中定义变量在执行完毕之后是应该销毁的，但是上述fn函数返回值为一个匿名函数，匿名函数引用并返回上层作用域定义的num变量，之后匿名函数被赋给foo，因为匿名函数里引用上层变量num，导致num无法销毁，所以每次执行foo()，num都会改变，变量不会被销毁。

知道闭包之后了解防抖和节流的区别：

防抖：指定时间内多次执行指定函数只执行最后一次
节流：指定时间内指定函数只执行一次

防抖函数：

function debounce(fn,delay=500){
    let timer = null 
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) 
    }
}

定义debounce函数，接收参数为可能会被多次执行的函数以及指定时间，防抖函数参数中fn函数（会被多次执行的函数）在定时器指定时间结束后执行，如果在定时器执行时间还没到delay指定时间时再次触发防抖函数，因为闭包的缘故，timer已经不是null，所以if判断为true，将会阻止定时器执行，再重新开始进行定时器延迟执行指定函数fn。

节流函数：

function throttle(fun, delay=500) {
        let pre = 0
        return function () {
            let now = new Date()
            if (now - pre > delay) {
                fun()
                pre = now
            }
        }
    }

定义throttle函数，参数同防抖函数，pre为上次执行函数的时间，返回的匿名函数中now为当前时间，匿名函数的变量在执行后会被销毁，所以每次now都是当前时间，如果当前时间的时间戳减去上次执行函数的时间戳大于延迟执行时间，表示指定时间已经经过，将会执行函数，如果不大于，表示还在指定时间内，将不执行函数。在执行函数后，pre被赋值给这次执行函数的时间，在下次执行时，pre继续和now进行比较判断是否执行指定函数。