防抖和节流

最新推荐文章于 2025-08-01 15:01:36 发布

Matcha_ice_cream

最新推荐文章于 2025-08-01 15:01:36 发布

阅读量275

点赞数

CC 4.0 BY-SA版权

分类专栏： # 前端面试题文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Matcha_ice_cream/article/details/126670199

前端面试题专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了防抖和节流两种重要的性能优化技术。防抖技术确保在频繁触发事件时，只执行最后一次操作，常用于输入验证或长按事件。而节流则限制在规定时间内函数的调用次数，适用于滚动事件处理。通过实例代码展示了如何实现防抖和节流，以优化用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、防抖

防抖原理

多次触发事件，事件处理函数只能执行一次，并且是在触发操作结束后执行。

// 防抖：用户触发事件过于频繁，只要最后一次事件的操作
function debounce(fn, delay) {
	let timer = null;
	return function(...args) {
		//如果上一次有事件触发，清除计时器
		if(timer) clearTimeout(timer);
		timer = setTimeout(() => {
			fn.apply(this, args); //this指向fn
		}, delay);
	}
}

使用一个简单的例子演示一下：

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>防抖</title>
</head>
<script>
  window.onload = function () {
    function debounce(fn, delay) {
      let timer = null;
      return function (...args) {
        //清除上一次的定时器
        if(timer) clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, args); //改变this的指向，为fn
        }, delay)
      }
    }
    let btn = document.getElementById('btn');
    btn.onclick = debounce(function() {
      console.log('按钮被点击了');
    }, 1000);
  }
</script>
<body>
<button id="btn">按钮</button>
</body>
</html>

显示效果：

在这里插入图片描述

2、节流

节流原理

事件触发后，规定时间内，事件处理函数不能再次被调用。也就是说，规定时间内，函数只能够调用一次，并且是最先触发的那次调用

function throttle(fn, delay) {
	var lastTime = 0;
	return function(...args) {
		var nowTime = Date.now();
		if(nowTime - lastTime > delay) {
			fn.apply(this, args);
			lastTime = nowTime;
		}
	}
}

使用一个简单的例子演示一下：

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>节流</title>
</head>
<style>
  body {
      height: 2000px;
  }
</style>
<script>
  // 在一定的时间间隔内，只触发一次事件，并且执行的是最先触发的那次
  function throttle(fn, delay) {
    let lastTime = 0;
    return function (...args) {
      // 记录现在的时间
      let nowTime = Date.now();
      if(nowTime - lastTime > delay) {
        fn.apply(this, ...args);
        lastTime = nowTime; //更新一下最后的时间
      }
    }
  }

  window.onscroll = throttle(function () {
    console.log('您拖动了我呀!!!')
  }, 2000);

</script>
<body>
</body>
</html>

显示效果：

在这里插入图片描述