14DOM编程：事件的防抖与节流

最新推荐文章于 2023-12-13 00:00:00 发布

_wayliu

最新推荐文章于 2023-12-13 00:00:00 发布

阅读量128

点赞数

分类专栏：解锁前端面试体系核心攻略

本文链接：https://blog.csdn.net/weixin_44499465/article/details/115069999

版权

解锁前端面试体系核心攻略专栏收录该内容

20 篇文章 6 订阅

订阅专栏

1.事件的防抖

2.事件的节流

1.事件的防抖

防抖的中心思想：我会等你到底。在某段时间内，不管你触发了多少次回调，我都只认最后一次。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #divA {
      width: 100px;
      height:100px;
    }
    
    #divA {
      background-color: pink;   
    }
  </style>
</head>
<body>
  <div id="divA">我是A</div>
  <div id="divA">我是A</div>
  <div id="divA">我是A</div>
  <div id="divA">我是A</div>
  <div id="divA">我是A</div>
  <div id="divA">我是A</div>
  <div id="divA">我是A</div>
  <div id="divA">我是A</div>
  <div id="divA">我是A</div>
  <div id="divA">我是A</div>
</body>
<script type="text/javascript">
	// fn是我们需要包装的事件回调, delay是每次推迟执行的等待时间
	function debounce(fn, delay) {
	  // 定时器
	  let timer = null
	  
	  // 将debounce处理结果当作函数返回
	  return function () {
	    // 保留调用时的this上下文
	    let context = this
	    // 保留调用时传入的参数
	    let args = arguments
	    // 每次事件被触发时，都去清除之前的旧定时器
	    if(timer) {
	        clearTimeout(timer)
	    }
	    // 设立新定时器
	    timer = setTimeout(function () {
	      fn.apply(context, args)
	    }, delay)
	  }
	}
	// 用debounce来包装scroll的回调
	const better_scroll = debounce(() => console.log('触发了滚动事件'), 1000)
	document.addEventListener('scroll', better_scroll)
	
</script>
</html>

2.事件的节流

节流的中心思想：从触发事件开始算起，保证在设定时间阈值内至少执行一次。

// fn是我们需要包装的事件回调, interval是时间间隔的阈值
function throttle(fn, interval) {
  // last为上一次触发回调的时间
  let last = 0
  
  // 将throttle处理结果当作函数返回
  return function () {
      // 保留调用时的this上下文
      let context = this
      // 保留调用时传入的参数
      let args = arguments
      // 记录本次触发回调的时间
      let now = +new Date()
      
      // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
      if (now - last >= interval) {
      // 如果时间间隔大于我们设定的时间间隔阈值，则执行回调
          last = now;
          fn.apply(context, args);
      }
    }
}
// 用throttle来包装scroll的回调
const better_scroll = throttle(() => console.log('触发了滚动事件'), 1000)
document.addEventListener('scroll', better_scroll)