防抖和节流

最新推荐文章于 2024-04-07 11:56:57 发布

Matcha_ice_cream

最新推荐文章于 2024-04-07 11:56:57 发布

阅读量222

点赞数

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

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

版权

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

1 篇文章 0 订阅

订阅专栏

防抖和节流

1、防抖
- 防抖原理
2、节流
- 节流原理

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>