JS中的节流和防抖

1.防抖

• 概念：就是指连续触发事件但是在设定的一段时间内中只执行最后一次。例如: 设定1000毫秒执行，当你触发事件了，他会1000毫秒后执行但是在还剩500毫秒的时候你又触发了事件，那就会重新开始1000毫秒之后再执行
• 核心：重新开始
• 应用场景：1.搜索框搜索输入 2.文本编辑器实时保存
• 代码实现思路：

let timerId = null;
document.querySelector('.ipt').onkeyup = function(){
    
    
	//防抖
	if(timerId !== null){
    
    
		clearTimeout(timerId)
	}
	timerId = setTimeout(() => {
    
    
		console.log("防抖函数")
	},1000)
}

2.节流

• 概念：就是指连续触发事件但是在设定的一段时间内中只执行一次函数例如: 设定1000毫秒执行，那你在1000毫秒触发在多次，也只在1000毫秒后执行一次
• 核心：不要打断
• 应用场景：1.高频事件（快速点击 鼠标滑动） 2.下拉加载 3.视频播放记录时间
• 代码实现思路：

let timerId = null;
document.querySelector('.ipt').onmouseover= function(){
    
    
	//节流
	if(timerId !== null){
    
    
		return
	}
	timerId = setTimeout(() => {
    
    
		console.log("节流函数")
		timerId = null;
	},100)
}