前端-闭包

闭包概念

• 在一个函数里嵌套另一个函数，函数内部可以访问外部变量，外部函数不可操作内部变量；
• 闭包是有权访问另一个函数作用域中变量的函数

function func(a){
	return function(){
		console.log(a);
	}
}
console.log(func('hello'));//调用外部的函数
func('hello')()//调用内部函数

闭包好处

• 可以让一个变量长期在内存中不被释放
• 避免全局变量的污染，和全局变量不同，闭包中的变量无法被外部使用
• 私有成员的存在，无法被外部调用，只能直接内部调用

闭包场景

• 隔离作用域，保护私有变量，不会被垃圾回收机制回收；

function func(){
	let i = 0
	return function(){
		i++
    	return i
	}
}
console.log(func()()); //1
console.log(func()()); //1
let a = func()
console.log(a());//1
console.log(a());//2
console.log(a());//3

• 防抖

设置一个定时器，将很多个相同的操作合并成一个。规定在delay后触发函数，如果在此之前触发函数，则取消之前的计时重新计时，只有最后一次操作能被触发。例如：实时搜索的input，一直输入就不发送。

let input = document.querySelector("input");
let time = null;//time用来控制事件的触发
 
input.addEventListener('input',function(){
   //防抖语句，把以前的定时删除，只执行最后一次
   if(time !== null){
     clearTimeout(time);
   }
   time = setTimeout(() => {
     console.log(this.value);//业务实现语句，这里的this指向的是input
   },500)
 })

• 节流

判断是否达到一定的时间来触发事件。某个时间段内只能触发一次函数。例如：在指定的时间内多次触发无效。

function throttle(fn, time) {//连续触发事件  规定的时间
        let flag = false;
        return function () {
            //使用标识判断是否在规定的时间内重复触发了函数，没有就触发，有就不触发
            if (!flag) {//不为假时 执行以下
                fn();//触发事件
                flag = true;//为真
                setTimeout(() => {//超时调用（在规定的时间内只执行一次）
                    flag = false;
                }, time);
            }
        }
    }
  
    mybtn.onclick = throttle(btn, 3000);//单击事件