[JavaScript知识库]JavaScript实现防抖函数

什么是防抖？防抖就是避免快速多次点击后执行过多的函数调用，就是本来你点击支付宝支付后不小心在点击一次，导致支付函数被调用了两次，还都执行了，付了两次钱。

防抖函数的思想就是将函数延迟调用，延迟时间内不可再次调用，为确保在时间段内不在执行，需要将延迟函数清除。

<input type="button" name="" id="" value="" />

let btn=document.querySelector('input')
let timer
function pushNamber(){
	console.log('这是一个防抖函数')
}
btn.addEventListener('click',function(){
	clearTimeout(timer)
	timer=setTimeout(()=>{
		pushNamber()
	},1000)
})

需要注意的点有：timer变量只能定义在监听函数外，如果在监听函数内，点击按钮后执行监听的回调函数会多次定义，值不唯一，无法关闭上一个函数。

回调函数只可使用箭头函数，否则this将指向window而不是btn对象（不用箭头函数需要使用call或者apply）

核心思想：在规定的时间内，没有点击按钮，才会执行函数。在规定事件内，一直按下按钮，函数会一直不会被触发。