一看就懂的防抖与节流_防抖在生活中哪里遇得到-CSDN博客

本文链接：https://blog.csdn.net/sinat_34798463/article/details/114991640

防抖和节流这两个词应该不陌生吧！防抖和节流就是为了解决不可控的高频触发和快速连续触发导致响应跟不上触发，造成页面卡顿，假死现象。

lodash的_debounce、_throttle已经替我们封装好了这两个方法。如果你不想引用第三方库并且想知道个所以然，那下面的文章就很适合你。

防抖(debounce)

概念

延时一段时间执行一个函数，如果在这个等待时间又触发了这个事件，那么上一个事件的延时失效，以新时间的延时为准。直到没有新的事件了，函数才可以真正的执行。

生活中的类似场景

防抖就好像我们生活中关电梯门，第一个人按了关门按钮，电梯缓缓关上，外面有人按了开门，那么上一个人按的关门请求失效，以新进来的人按关门的时间为准，直到外面没有按开门了，电梯才能真正的关上。

代码中的使用场景

input框实时搜索并发送请求；scroll事件获取滚动高度；resize事件等

代码

<html>
  <script>
    // 防抖
    function debounce(fn, delay) {
      let timer = null;
      return function() {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
          fn.apply(context, args);
        }, delay);
      }
    }
    function foo(text) {
      console.log(`${text}`);
    }
    let handleDebounce = debounce(foo, 1000);
    window.addEventListener('resize', () => handleDebounce('trigger'));
  </script>
</html>

运行结果

在这里插入图片描述

节流(throttle)

概念

延时一段时间执行一个函数，如果在这个等待时间又触发了这个事件，那么这个新的事件无效。

生活中的类似场景

节流我们还以电梯举例。节流就好像乘坐电梯的时候我们已经把门关上了，电梯已经动起来了，这个时候又来了一个人按开门键，那不好意思只能等下一部电梯了。

代码中使用的场景

代码

<html>
	<body>
			<button id="btn">测试节流</button>
	</body>
	<script>
		// 节流
		function throttle(fn, delay) {
			let timer = null;
			return function() {
				let context = this;
				let args = arguments;
				if(!timer) {
					timer = setTimeout(function() {
						fn.apply(context, args);
						timer = null;
					}, delay);
				}
			}
		}
		let handleThrottle = throttle(foo, 1000);
		document.getElementById('btn').addEventListener('click', () => handleThrottle('throttle'));
	</script>
</html>