js 闭包的应用（工作、面试常用）

1、为什么要学习 js 的防抖节流函数

• 作为前端开发不得不知道的
• 面试的时候经常会问到的
• 是闭包的实际应用

2、防抖函数

当持续触发事件，一定时间内没有再次触发 事件处理函数才会执行一次
如果设定的事件到来之前 又一次触发了事件 就重新开始延时

触发事件 一段时间内 没有触发 肯定是定时器
（在设定的时间内 又一次触发了事件 重新开始延时 代表的就是重新开始定时器）
（那么意味着 上一次还没有结束的定时器要清除掉 重新开始）

let timer
clearTimer(timer)
timer= setTimeout(function(){},delay)

//防抖函数 第一步设想
function debouce(delay,value){
	let timer
	clearTimeout(timer)
	//我们想清除的是 setTimeout ，我们应该存储这个 timer 的变量，timer 变量需要一直保存在内存当中
	//既然你不想打印之前已经输入的结果  清除以前触发的定时器
	//timer 变量需要一直保存在内存当中  说明造成内存的泄露 使用闭包（函数里面 return 出函数）来实现
	timer=setTimeout(function (){
		console.log(value)
	},delay)
}

//防抖函数
function foo(value){//回调函数
	console.log(value);
}
function debouce(delay,callback) {//防抖
	let timer
	return function (value){
		clearTimeout(timer)
		timer = setTimeout(function (){
			callback(value)
		},delay)
	}
}
var input = document.getElementById('myInput'); //获取dom
var func = debouce(1000,foo);
input.addEventListener('keyup',function (e){
	func(e.target.value)
})

2、节流函数

当持续触发事件的时候 保证一段时间内 只调用一次事件处理函数
一段时间内 只做一件事情

实际应用 表单的提交

典型的案例就是鼠标不断点击触发，规定在 n 秒内多次点击只有一次生效
比如规定的时间是一秒钟，那么这一秒内哪怕手速再快 点击了一百次，也只执行一次

function throttle(wait,callback){
	let timerOut //相当于 在办理业务
	return function(){
		if(!timerOut){
		  timerOut = setTimeout(function(){
			   callback()
			   timerOut = null //上次的办理结束以后，能够将 timerOut 设置为初始值
		   },wait)
		}

	}
}
function fn(){
	console.log('提交了')
}
var btn = document.getElementById('btn');

btn.onclick = throttle(1000,fn);