防抖、节流及应用/风尚云网/前端/JavaScript学习

最新推荐文章于 2024-11-07 13:38:59 发布

风尚云网

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量664

点赞数 5

分类专栏：风尚云网学前端总结的一部分前端面试题风尚学js 文章标签： javascript 学习前端风尚云网面试

本文链接：https://blog.csdn.net/zsx0806/article/details/123008990

版权

风尚云网学前端同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

总结的一部分前端面试题

12 篇文章 0 订阅

订阅专栏

风尚学js

4 篇文章 0 订阅

订阅专栏

学习/防抖、节流及应用

风尚云网/前端/JavaScript学习

主题：关于防抖”和“节流

大家好，我是风尚，一个web前端开发者，著作风尚云网|首页，

博客园，简书等平台均搜索风尚云网

引言：

关于防抖和节流是很多公司的面试常见问题，有些人不知道是什么意思，有些知道意思，却难以分清两者的区别，还有一些人，明白二者区别，但没有遇到过合适的应用场景，以至于无法真正的去理解它们，今天，风尚云网带领你们一起探究一下防抖与节流，本博文就尝试把这些疑难杂症的问题逐个击破，欢迎下方评论区指导与指正。

一：防抖

顾名思义，防止抖动，什么叫抖动，事件被高频触发，想象你在用鼠标点击按钮操纵一个小人让他有跳跃的动作，你狂点鼠标，小人狂跳，这就是最直观的抖动现象。

现在我们需要防止抖动，怎么做呢？当我们快速点击鼠标的时候，仅有一次动作是生效的，就可以解决这个问题。

怎么做呢？这就取决于鼠标点击的有多快，也就是我们设定一个时间，当两次点击的时间间隔小于那个时间，就只有最后一次点击才会生效。

这也就可以引出“防抖”的定义：

任务频繁触发的情况下，只有触发的间隔超过指定间隔，任务才执行。

把文字意思用代码来表现就是：

//风尚云网防抖代码示例：
function debounce(fn,delay) {
    let timer;
    return function(){
      let args = arguments;
      if(timer){
        clearTimeout(timer);
      }
      timer = setTimeout(()=>{
        fn.call(this,args);
      },delay)
    }
}

防抖示例演示图片：

防抖示例演示代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>风尚云网防抖学习</title>
	</head>
	<body>
		<div>
			<p class="text">1</p>
			<button class="btn">点击我加一</button>
		</div>
	</body>
	<script type="text/javascript">
		// 防抖：
		function debounce(fn, delay) {
			let timer;
			return function() {
				let args = arguments;
				if (timer) {
					clearTimeout(timer);
				}
				timer = setTimeout(() => {
					fn.call(this, args);
				}, delay)
			}
		}
		// dom选择
		let btn = document.querySelector(".btn");
		let txt = document.querySelector(".text");
		// 方法监听
		btn.addEventListener("click", debounce(() => {
			console.log("防抖执行一次");
			txt.innerText++;
		}, 1000))
	</script>
</html>

大家试着在浏览器里运行这段代码，就会发现，只要我们两次点击的间隔小于一秒，那么多出来的点击就是无效的，只会最后一次生效，也就是说，如果慢慢地点击

其中的奥秘就在于，每次点击时，只要timer还在，就清空定时器重新计时。

二：节流

可以这么比喻，节流就像排队，比如我们在车站候车，当听到检票进站的通知，不论你有多紧急，跑得多快，还是得跟着排队，一个个地过闸机口，你的通过速度不可能比闸机口开关的速度更快了。

引出定义：

指定时间间隔只执行一次任务。

到这里你可能会困惑，防抖也有时间间隔，节流还是时间间隔，它俩啥区别？

好的，到这里，你遇到了区分它们的唯一一个难点。

防抖：超过指定时间间隔，不论点击多少次都只执行一次。
节流：指定时间间隔只执行一次，执行频率不受操作频率影响，但会把所有的都执行完。

把文字意思用代码来表现就是：

function throttle(fn,delay){
  let flag = true;
  return function(){
    if(flag){
      flag =false;
    }
    timer = setTimeout(()=>{
      fn();
      flag = true;
    },delay)
  }
}

节流示例演示图片：

节流示例演示代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>风尚云网节流</title>
	</head>
	<body>
		<div>
			节流：指定时间间隔只执行一次，执行频率不受操作频率影响，但会把所有的都执行完。
			<hr >
			<p class="text">1</p>
			<button class="btn">点击我加一</button>
		</div>
	</body>
	<script type="text/javascript">
		function throttle(fn,delay){
		  let flag = true;
		  return function(){
		    if(flag){
		      flag =false;
		    }
		    timer = setTimeout(()=>{
		      fn();
		      flag = true;
		    },delay)
		  }
		}
		// dom选择
		let btn = document.querySelector(".btn");
		let txt = document.querySelector(".text");
		// 方法监听
		btn.addEventListener("click", throttle(() => {
			console.log("节流执行一次");
			txt.innerText++;
		}, 3000))
	</script>
</html>