JavaScript笔记 - 防抖与节流

防抖与节流

目录

• 防抖与节流
  • 1. 防抖
  • 2. 节流

• 在进行窗口操作或者输入框操作时，如果事件处理函数触发频率过高，会加重浏览器和服务器的负担。此时可以使用防抖和节流的方式来减少调用频率，同时又不影响实际效果。
• 防抖与节流是一个宽泛的概念，不仅仅局限于JS，许多语言/框架都可以使用，此篇笔记以JS为例演示效果

1. 防抖

• 定义：单位时间内，频繁触发一个事件，以最后一次触发为准

• 实现原理：设置一个延时器(setTimeout)，如果在指定时间内收到多次请求，则每次受到请求都会清除上一次请求的定时器，重新开始计时。即，在指定时间内用户无论提交多少次，只有最后一次能触发成功

• 示例代码

  let timeID = null
  document.querySelector('input').oninput = function () {
  	//1.清除之前的定时器
  	clearTimeout(timeID)
  	//2.开启本次定时器
  	timeID = setTimeout(() => {
  		console.log(`发送ajax,搜索的内容是${this.value}`)
  	}, 500)
  }
  

2. 节流

• 定义：单位时间内，频繁触发一个事件，最终只会触发一次

• 实现原理：设置状态锁(key)，key初始值为false。当点击/输入时，对key进行判断，如果key未上锁（false），那么开始发起请求，并且给key上锁（true）。如果你此时继续点击，对key进行判断时，发现key上锁了，则不发起请求，点击无效。当请求完成后，再次key设置为false，则可以尝试发送新一轮请求。

• 示例代码

  //声明一个全局变量存储触发时间
  let lastTime = null
  //页面滚动事件
  window.onscroll = function () {
  	//1.每一次触发 先获取本次时间戳
  	let currentTime = Date.now()
  	//2.判断当前时间 与 上次触发时间 是否超过间隔
  	if (currentTime - lastTime >= 500) {
  		console.log(document.documentElement.scrollTop)//获取滚动距离
  		//3.存储本次的触发时间
  		lastTime = currentTime
  	}
  }
  

• 防抖和节流的区别

  • 防抖是将多次执行变为最后一次执行，函数防抖对于连续触发的事件，只在最后执行一次
  • 节流是将多次执行变成每隔一段事件执行，函数节流一段时间内只执行一次。